How Can E-Learning Designers Use the Parallax Effect in Courses?
How many times have you learned to do something new in a software program you’ve been using for years?
Maybe you discovered a feature or preference you didn’t know existed. Or, maybe it was less about a feature than it was combining features or using the tool in creative ways that enabled you to create something magical.
Creative accidents are one of the best ways to brighten a course designer’s day. While they can’t always be triggered on demand, a sure-fire way to find them is by participating in active communities like E-Learning Heroes.
Learning to use software tools in new and creative ways is like getting a free upgrade. And that’s what this week’s parallax challenge is all about.
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 some fantastic 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 a slider using a large image, Steve was able to create a scrolling timeline interaction. Sliders just went up a notch.
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.
In a recent challenge, 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.
Be sure to download Mark’s source file to learn more about his project and how he built it.
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.
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.
Challenge of the Week
This week, your challenge is to create a parallax effect for e-learning using Storyline’s sliders.
Technically, this is our most 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.
Last Week’s Challenge:
Before you slide into this week’s challenge, take a few moments to zoom through the fantastic examples your fellow community members shared:
Wishing you a sliderrific week, E-Learning Heroes!
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.