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.Using Anthropomorphic Characters in E-Learning #539
This week, your challenge is to create a short learning experience where the main characters are objects, tools, or even concepts that act like people. Let the characters show (and maybe complain about) what happens when they’re used the right or wrong way.How Do You Show Dialogue and Conversations in E-Learning? #105
Conversations and Dialogue #105: Challenge | Recap Challenge of the Week This week your challenge is to show how dialogue can be shown in e-learning courses. You can focus on talking, texting, instant messaging, video chats, or any other form of communication. Your projects can be static or interactive and you can build your demos with any authoring tool. We just want to see your creative solutions for showing dialogue in e-learning. To get help you get started, I’ve rounded up a few community examples that feature creative ways to show dialogue. Grammar Guide to Speech Balloons There’s no better guide to understanding speech balloons than Comic Book Grammar & Tradition by Nate Piekos. You’ll find a list of every type of speech balloons and when you should use them. If you’re building e-learning scenarios, you’ll want to bookmark this article. Comic Book Grammar & Tradition by Nate Piekos Comic Style Speech Bubbles in E-Learning Speech balloons don’t have to be used with comic or illustrated characters. I like the way this example combines comic style panels and speech balloons with photographic characters. View Fighting Harassment Comic Book Style Interactive Conversations in E-Learning In this example, users control the pacing of the conversation by clicking characters to advance from question to answer. The overlapping speech balloons help learners focus on each character’s words. Free PowerPoint Template: Conversation Interaction Using Pull Quotes to Depict Speech Typically used in journalism, pull quotes are graphic elements that are used to highlight an excerpt or key phrase from an article. This type of approach also works well for showing on-slide speech. View the interactive pull quote example Instant Message Experience Simulating instant messages on mobile phones is another way to show digital communication. Text message template Showing Text Messages in Film If you’ve ever watched BBC's Sherlock or House of Cards, you’ve likely noticed the innovative ways filmmakers are depicting on-screen text messages. House of Cards uses animated chat boxes layered over live action footage. This enables viewers to remain in the scene with the actor while the text messages are displayed. Sherlock takes a more simplistic approach by using floating words without the bubbles around the text. This prevents the graphic elements from appearing outdated as text messaging styles change. You can learn more about the ways filmmakers are experimenting with text messaging styles in A Brief Look at Texting and the Internet in Film. Resources Previous challenges: Using Characters in E-Learning #18 Preventing Workplace Violence: E-Learning Scenarios #57 Engage Your Learners with Interactive Conversations #90 How Are You Using Branching Scenarios in E-Learning? #99 Forum discussions: How to make a quotation interesting When do you use Speech Bubbles? User incremented speech bubbles Articles and blog posts: Create Custom Callouts for Your Courses Engage Your Learners By Mimicking the Real World Downloads and templates: More than 100 Free Callouts for Your Online Course Design Over 45 Free Speech Bubbles to Make Your E-Learning Courses Talk FREEBIE - speech and thought bubbles in PowerPoint Last Week’s Challenge: Before you sweet talk your way through this week’s challenge, check out the audio portfolio examples shared over the past week: E-Learning Voice Over Portfolios #104: Challenge | Recap Wishing you a chat-tastic week, E-Learning Heroes! New to 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.Custom Glossary Interactions in E-Learning #396
Using Custom Glossary Interactions in E-Learning #396: Challenge | Recap Glossaries are a common interaction in e-learning courses. Course designers use glossary interactions to define key terms, explain industry-specific jargon, and provide context and understanding of cultural phrases. By including a glossary in your e-learning course, you're providing learners with a valuable tool that they can use to enhance their understanding of the material. Not only does this help learners to better engage with the content, but it also allows them to interact with the course on a more meaningful level. If you're working in Storyline 360, you can easily add a glossary using the quick-and-easy glossary import/export feature. But you're not limited to the defaults. When you need your glossary to align visually with the rest of your course, you'll need to build it from the ground up. And that's what this week's challenge is all about! Challenge of the Week This week, your challenge is to create a glossary interaction to show how they can be used in e-learning. Resources Using Glossary Interactions in E-Learning #192: Challenge | Recap Storyline 360: Adding a Glossary Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own thread and share a link to your published example.. Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you get started building your custom glossary interactions, check out the certificate examples your fellow challengers shared over the past week: E-Learning Certificate Examples & Templates RECAP #395: Challenge | Recap New to the E-Learning Challenges? The weekly e-learning 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. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.
