Creating A Magical Effect Using The Scrolling Panel Object And JavaScript

At Discover eLearning we are big fans of the Scrolling Panel object found in Articulate Storyline 360! We have created a number of different ideas in the past which have combined additional JavaScript code to create some very interesting results, as you can see in some of our previous Storyline example projects!

Recently we discovered another very cool trick we can achieve using the Scrolling Panel object which allows us to create this very cool layered X-Ray image style effect.

Typically when Scrolling Panel object t is given the ability to be click and dragged in Storyline then all contents within are also designed to move along with it.

This can’t be easily changed but with our customisation we have created the ability to counteract the panel movement in order to maintain the image position within throughout the click and drag process, and the result as you can see in our experiment above is very effective!

We will be publishing a full tutorial course covering this method from start to finish, along with a number of practical applications for eLearning developers. So make sure that you keep an eye on our Tutorials pages for new advanced-level learning courses coming very soon from Discover eLearning!