Integrating Storyline with parallax

Dec 02, 2014

Lea Cohen
By Lea Cohen

Hello

 In one of our sites we're implementing the parallax effect using the skrollr.js library.

When we try to integrate Storyline in it, however, we encounter some problems:

 1) When  we add an iframe whose source is the swf version (story.html), it covers all other elements in the page. I know that Flash can have a parameter of wmode set to transparent, and maybe that would solve the problem, but I don't see how I can set ti via Storyline.. Or maybe there is another solution to the problem

 2) When using the HTML5 version (story_html5.html), it appears great on Chrome, but in Firefox only the background appears, and not the rest of the storyline.

 3) When we scroll down the parallax site, and pass the storyline, sometimes the page stops scrolling. Only when we click the browser window again does the scroll continue. It's as if the focus gets lost and the mouse click returns it. Since it only happens after we scroll through a storyline iframe, I'm wondering of something in the Storyline is causing this.

 Thank you

 

6 Replies
Lea Cohen
over 9 years ago12/16/14 at 8:48 am (UTC)

Here is what I ended up doing:

  1. I can't find where to change wmode to transparent in Storyline, but I found how to change it in the generated files :
    1. In the root of the generated directory, find the story.html file.
    2. Go to line 134, where the g_strWMode parameter is defined.
    3. Change its value from window to transparent.
    4. That's it!
  2. We decided not to use HTML5 because it doesn't work in Internet Explorer
  3. Surprisingly enough, the change to wmode solved this problem too :)
Lea Cohen
almost 6 years ago05/07/18 at 5:21 am (UTC)

Hi Nic

Thanks for reaching out. I used skrollr.js in only 1 project. It's been a few years, and there are other scripts there too, but you can take a look at the project here:

http://www.catch-cash.ort.org.il/

The site is in Hebrew, but I think you can follow the scrolling despite that.

Feel free to ask any questions, and I hope I can dig out of my memory relevant answers :)

Nic Ralph
almost 6 years ago05/07/18 at 10:12 am (UTC)

Hello Lea,

Very kind of you to reply and send the link - thank you!

So interesting you used skroller.js. This is what I'm wanting to use to take our content to a whole new level.

Two questions:

Which version of Articulate do you find stroller.js works best in, Storyline or Rise?

Do you create a HTML web animation with Skroller then embed in to Storyline as a Web object?


Sincere thanks,
Nicole

Lea Cohen
almost 6 years ago05/07/18 at 11:36 am (UTC)

Hi Nicole

Regarding Rise - we never used at all. We only ever used Storyline.

And actually we used skrollr.js outsideof Storyline  - we used it in the same web page where we embedded Storyline, but not in the Storyline  itself.

So if you're trying to use skrollr.js inside Storyline, I don't know if my project is of any help. But if you have further questions, I'll be happy to answer as well as I can.

Lea

This discussion is closed. You can start a new discussion or contact Articulate Support.