Blog Post
AdamZamczyk
Community Member
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!
JodiSansone
8 months agoCommunity Member
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?
- AdamZamczyk8 months agoCommunity MemberHi Jodi. On the 3rd tab you should be able to zoom in the photo by scrolling your mouse wheel
- JodiSansone8 months agoCommunity MemberThank 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.