Creating Parallax Effects with Interactive Sliders in E-Learning (2019) #253

Parallax Scrolling Effects in E-Learning #253: Challenge | Recap

What is the Parallax Effect?

Parallax scrolling is a motion effect that’s used to simulate depth by animating background images slower than foreground images. The effect can be found in everything from video games to websites to e-learning. Let’s take a look at a few examples.

How’d You Do That?

A good example of how features can be used differently came from Steve Flowers during the Articulate Storyline 2 beta. Steve was playing with Storyline’s new sliders and shared a way to connect one slider to another.

There’s nothing too exciting about connecting sliders... Not until you consider how easily sliders can be customized.

By changing the visual appearance of the slider's thumb a large image, Steve was able to create a scrolling timeline interaction. Sliders just went up a notch.

Comet Landing

Connecting two visual sliders together is cool. But what happens when you connect dozens of visual sliders to a slider? You get a parallax effect that’s out of this world!

Slider possibilities went up a few more levels after Jerson Campos shared his Comet Landing example with the community. Several revisions later, Jerson’s example was awarded a 2015 Honorable Mention in our Guru Awards.

View demo | Jerson Campos

Interactive Conversations

Mark Bennett shared his own take for creating the parallax effect with sliders. By making both sliders full-slide images, Mark discovered a creative way to make the entire background draggable.

View demo | Mark Bennett | Website

Be sure to download Mark’s source file to learn more about his project and how he built it.

Mountain Tours

Here’s a recent example shared by Ross Garner. I really like how Ross customized the slider’s thumb to visually align with his mountain theme. It's a practical example and one that should help most users begin using multiple sliders to create the parallax effect.

View demo | Download | Ross Garner | Website | @R0ssGarner

Football and Anatomy Sliders

Here are two more examples and source files from Tom. I like these examples because they show how multiple sliders can be combined for educational purposes.

Football: View | Download | Anatomy: View | Download

Challenge of the Week

This week, your challenge is to create a parallax effect for e-learning using Storyline’s sliders.

Technically, this is an advanced challenge. Please let us know if you get stuck or have any questions. I don’t want anyone to skip this challenge because they can’t get their sliders to work correctly.

New Entries Only!

We hosted the first parallax challenge three years ago. To keep things fresh, we’re asking that you share only new parallax examples this week. You’re more than welcome to re-work a previous example.

Last Week’s Challenge:

Before you slide into this week’s challenge, check out the interactive checklist examples your fellow community members shared over the past week:

Checklist Interactions in E-Learning RECAP #252: Challenge | Recap

New to the E-Learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.