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.

Steve Flowers

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.

Comet Landing

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.

Interactive Conversations

View demo | Download | 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.

Mountain Tours

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 and Anatomy Sliders

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:

18 Interactive Checklist Examples for E-Learning Designers #252 

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.

145 Comments
Jodi Sansone
David Anderson
Jodi Sansone
David Anderson
David Anderson
Nicki Berry
Jonathan Hill
Nicki Berry
Jodi Sansone
Steve Morey
Dianne Hope

I've been stalking your parallax walking guy David! Heads up - the links on your previous parallax weekly challenge entry and featured post on this site give a 404 error now - but I did I find your YouTube video which has been very helpful. I was exploring this concept to possibly use for a client project - but I'm having issues with the background slider thumbnail image ending up very blurred. I've tried a few tweaks, including resizing the image, and altering the story size in Storyline - nothing seems to improve the quality of the image. I'm hoping that someone has an answer here... Here's the demo showing what I've come up against - I haven't added any triggers yet, just the 2 sliders - I figure it's not worth my time finalising this unless I can sort out the blurred image... Expand

Jonathan Hill
David Charney
Root Bradford
David Charney

I made something new based on something old. I have been wanting to redo this parallax project to see how well it works in Storyline 360...not bad but GIFs are a bit goofy. It might be the browser. Anyway, this is still rough and I have more to add in and polish. I have an idea that could let me do away with GIFs (if it works). Parallax Astronaut: http://elearninglocker.com/Samples/ParallaxAstronaut/story.html You can download it here: http://elearninglocker.com/portfolio-items/storyline-experiment-parallax-astronaut/ I want to fix the flashing when the astronaut goes from standing to walking. Also, I learned Storyline can only import a file with a max width of 2048. So I scaled up some of these graphics so they get blurry. Also, because Storyline scales, set the width of your pr... Expand

David Charney
Nick Russell
Holley Berley
David Anderson
Joe Waddington
David Anderson