How to Create Fading Layers in Storyline

Sometimes when I am poking around inside published courses trying to solve one puzzle a crazy idea will come into my head. This was one of those. I am not certain this particular code will be immediately useful to you, but hopefully it will spark a crazy idea in your head!

While trying to solve an issue with Storyline I recently noticed that the entire contents of each slide’s layers are in a single DIV element. This lets us easily target all the contents of a layer with our JavaScript.

To illustrate this I wrote this code to grab the first layer and set its opacity to 50%:

$(".slide-layer:eq(1)").css("opacity", 50);

So let’s take a moment to digest that.

I am using jQuery to find all the DOM elements with the slide-layer class. That would return an array of all the layers and I am only interested in the first one, so I add that eq(1). Then I set its CSS opacity to 50%. All in one line of code :-)

To make things more fun I decided to build a demo that uses a Storyline Slider to allow you to control the opacity yourself.

You can play with that demo here:

Here is the code I used for that:

var o = GetPlayer().GetVar("layer_opacity_cow");

$(".slide-layer:eq(1)").css("opacity", o/100);

First, I get the value of the slider. Then, I set the layer’s opacity to that value.

Watch the short video below to see how it easy it was to build that.

Visit the eLearning Brothers Storyline Template Library for tons of Storyline layouts, interactions, and more.

Not a member yet? Sign up for a free 7-day trial now!

James Kingsley has worked in the eLearning Industry for over 16 years. He has won several awards for combining technologies to produce better eLearning. James is a Solver of Complex eLearning Puzzles, Founder of CoursePortfolios.com, and the Co-Founder of ReviewMyElearning.com. You can follow him on Twitter or connect with him on LinkedIn for additional tips and examples.