The attention to design details takes this professional-looking tabs interaction to the next level.
Published 7 years ago
Version 1.0
Blog Post
35 Comments
- That's really cool!
- That's really cool!
- Can someone please explain how the tabs work? Did he use a motion path to move them across? If so, how does the size of the shape increase? Or maybe it is an animation? I am confused
- Can we please get the SL file to download? I am scratching my head as to how this was set up?
- This is a great interaction! Like others, I'd love to know more about how the smooth transition/animation/motion path as different tabs are selected works - very cool.
- Aman stated "As always, I used tabs created using HTML/JS/CSS and embedded it into the storyline 360 as a web object. On click of each tab a different slide layer containing the content and the graphic appears." https://www.linkedin.com/pulse/animated-tabs-elh-challenge-199-aman-vohra/
- Awesome design! One day when I'm all grown up I'm going to be as good as you Aman! :)
- how did Aman get the giant rectangle (the purple one at the corner) to occupy my entire browser? is that a story size setup customization? i tried to play around customising the player colours, and set it to use optimal browser settings but its still cant get to make it look like the whole browser is used.
any ideas?- I am not 100% sure, but it looks to me like a background image was added to the HTML (see code in the source below) and the player attributes set to transparent.
.bg {
background-image: url("bg111.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}- Hi Linda,
do you know what files do I have to change?
Thanks in advance!
- Good work! This is exceptional.
- Good work!
