top of page

#ELHChallenge 249: Creating Light and Dark Versions of E-Learning Templates

Writer's picture: Nyla SpoonerNyla Spooner

In this week's challenge, I wanted to incorporate a few common interactions in a new way. Inspired by fellow developer Jonathan Hill's challenge submission from a couple weeks ago, I tried to create the swipe effect using a slider.


I also used the slider effect from Michael Hinze's "Before and After" challenge submission as a guide for building this demo.


A before and after picture of the Berlin Wall and surrounding area with a sliding interaction
Michael Hinze "Berlin Wall Before and After" Challenge 100 Submission

I have a LOVE/HATE relationship with Storyline's slider interaction. I love that it exists, and that it pretty much programs itself. I hate how temperamental it can be across devices.


I created three versions of this demo, and settled on this design:


- Inserted slider interaction on a slide with two layers (dark and light variations)

- Inserted an image as the slider's "thumb" on the base layer, and on the dark/light layers.

- Created buttons that linked to each variation on branched slides.


An image of a cellphone is show with a dark layout and a light layout. A sliding effect toggles between the two screens.
See the Demo in Action


This type of slider provides a nice visual effect that can be used for comparison purposes, before and after demonstration, or other training purposes. I want to keep perfecting the effect so it's as seamless as Hinze's is here. That may prove tricky since I am trying to reveal layers that lead to branching, and Hinze's effect is simply one image.


I cannot wait to keep playing around with this effect, and sliders in general. How do you use sliders in your digital learning solutions?


View Demo here: http://bit.ly/ELH249



43 views0 comments

Recent Posts

See All

Comments


Stay in the know

Thanks for submitting!

© 2019 by Nyla Spooner. Proudly created with Wix.com.

bottom of page