Our next free workshop event will be announced very soon! Explore Our Online Training Courses and Master Classes!

Using Tabs Interactions in E-Learning

Everything You See Was Achieved In Articulate Storyline 360 This Week!

Well… ok, that’s a lie! There is one little added extra which is the scaling mouse hover transition effect on the image tabs themselves!

That’s a super simple effect to achieve which is detailed in my blog post – Create These Cool Mouse Rollover Effects in Articulate Storyline Using CSS. I’ve also got this topic lined up as a future episode of my brand new Storyline Magic Series for YouTube, so please make sure you subscribe to my channel for new video tutorial content coming very soon!

This project is actually something I’ve been working on for a client this week with the original version being a quiz that has a question about Bengaluru printed on each postcard (the answer is then revealed on the back when the card flips over).

I’d already gone as far as setting up all of the shuffling animations and layering effects for the project, so when I saw the theme for this week’s ELH Challenge, the idea to adapt the work for another purpose felt like another great opportunity!

Learn how to build interactive content like this yourself in Storyline in just 2 days!

Join our next Advanced-level Articulate Storyline 360 workshop (In-person or Virtual).

Related Articulate Storyline 360 Innovations

Year

2022

Methodology

  • Articulate Storyline 360
  • PhotoShop
  • Some additional CSS

Further Info

This project was submitted to the E-Learning Heroes Challenge #362 -Using Tabs Interactions in E-Learning (2022)

Inspiration

CSS-Tricks.com
‘member postcards?

Schedule a meeting

Why not book a consultation call with us? We’re here to assist you with any questions or concerns you may have.

Please note: All bookings are subject to confirmation. We reserve the right to reschedule based on availability.