Using Tabs Interactions in E-Learning #448: Challenge | Recap
Tabs interactions are one of the most popular interactions in e-learning. They’re super flexible and come in all shapes, sizes,...
Published 11 months ago
Version 1.0
Blog Post
This week, I've taken on a challenge centred around tab interaction, and I'm excited to share my example with you: https://tab.zamczyk.co.uk/.
The core of this short demo is to present seamless tab interaction featuring elegant and smooth animations when selecting from three tabs. Here, I use the default Storyline animations.
I'm still on a long journey to learn JavaScript and explore diverse custom techniques to elevate the user experience. I've incorporated a variety of animations and custom zoom effects activated by JavaScript triggers.
First Tab: Here, you'll find a single flip card animation that comes alive with a zoom effect as you hover your mouse over the cards.
Second Tab: This section lets you see a dynamic zoom image effect triggered by mouse hover. This custom JavaScript zoom effect keeps the original image dimensions and offers a tailored experience with adjustable speed, ease, and timing.
Third Tab: This tab showcases the same zoom effect (JavaScript), but it is controlled by scrolling your mouse wheel.
Dive into the demo and see for yourself!
The core of this short demo is to present seamless tab interaction featuring elegant and smooth animations when selecting from three tabs. Here, I use the default Storyline animations.
I'm still on a long journey to learn JavaScript and explore diverse custom techniques to elevate the user experience. I've incorporated a variety of animations and custom zoom effects activated by JavaScript triggers.
First Tab: Here, you'll find a single flip card animation that comes alive with a zoom effect as you hover your mouse over the cards.
Second Tab: This section lets you see a dynamic zoom image effect triggered by mouse hover. This custom JavaScript zoom effect keeps the original image dimensions and offers a tailored experience with adjustable speed, ease, and timing.
Third Tab: This tab showcases the same zoom effect (JavaScript), but it is controlled by scrolling your mouse wheel.
Dive into the demo and see for yourself!
- Hi Adam. I liked the flip card and hover effects, but I was not able to get the Paris scroll effect to work. I read your development note--maybe I misunderstood what I'm supposed to do on that layer?
- Hi Jodi. On the 3rd tab you should be able to zoom in the photo by scrolling your mouse wheel
- Thank you for clearing that up for me. I don't use a mouse anymore so I'm not scrolling with a wheel. I have one that I'll hook up to experience your effect.
- Adam this worked well and it does look great. My vision though is not that great so I could not read most of your text. Could you make the font larger and make sure the white text has more contrast behind it.
The javascript effects are visually exciting and makes it easy to view the images. Nice job.- thanks Jeffrey for your kinds words.
And also thanks for the suggestions, for this demo I did not consider enough font size or colour, so I updated my demo adding more contrast. And you suggestion also gave me a challenge - Is there a potential solution I could implement to allow the learner to change the font size?
So if you clear the cache and check the updated demo, you will see when you scroll with the mouse wheel, some text elements will resize as well :) this is not by all means perfect but is a starting point.
Maybe someone with more Javascript experience has a solution for that??
- This is amazing. Is there a way to learn JavaScript specifically for Storyline or are you self-taught. I would love to dive into that world.
- Hey. There are lots of materials available online. I recommend Learning Dojo https://youtube.com/playlist?list=PLGGfIkWckSmkSGp3OeT5mYx-6N_2Ho5jb&si=r9BSt1GGAcEsUqvg
- You don't have to learn any JavaScript specifically for Storyline especially now that there is support for JavaScript. Adam gave you a great resource for learning more. I have been using the xAPI script to capture more data and it works very well. You do need a learning record store to find and report the data.
- Hi adam! I love the first tab! Are you open to share with us your .story so that we can look and learn how you did it? I never see any work like yours on storyline. Thanks!
- Very nicely done :-)
