Scrollytelling Demo (without D3)

---

The basic idea of scrollytelling is that you can set up various "scene" as you scroll the webpage through different elements. This is enabled by the "ScrollMagic.Scene" function from the ScrollMagic JavaScript Library. These scenes can be various animations specified in CSS, such as opacity, color, font-size and others. When creating a scene, you need to associate a particular content element (e.g., a paragraph) as a trigger to activate this scene by using the element id as a "triggerElement". So as you scrolling through different HTML elements on the webpage, you activate different scenes in sequence. In this .html file, you will see this paragraph does not have an id as a trigger, so nothing happens at this moment. When you start to scroll down to the next paragraph (with an id "text1"), you will trigger a MagicScroll scene that manipulates "TEXT_1_OPACITY" (a paragraph) with the "text1opacity" CSS class.

This is the paragraph with a "text1" id. In the script "ScrollMagic.Scene()", we have created a scene ("ScrollMagic.Scene") using this paragraph as a "trigger". Specifically, we use the paragraph id ("text1") as a "triggerElement" to activate the CSS change. Therefore, when scrolling here, you have activated the "text1" to trigger some animation. In this example, we changed the text opacity for "TEXT_1_OPACITY" from 0 to 1, so it looks like the text appears when scrolling.

Now you have scrolled at this paragraph with "text2" id. Accordingly, you will activate a new ScrollMagic.Scene that uses "#text2" as a trigger. Look out that when creating a ScrollMagic.Scene in your script, you need to add a "#" sign before the id name. In the script, we use ".setClassToggle()" to define a CSS class modification while the scene is active. When the scene triggers the classes will be added to the supplied element and removed when the scene is over. For example, when this scene is triggered, .setClassToggle() adds the CSS class 'active' (with opacity as 1) to the class "text3opacity" (with an original opacity 0). So the text appears.

So now you have scrolled at this paragraph with "text3" id. Looking at the CSS code, you will see that we define ".text3opacity" with a different color than the prevous two. Keep in mind, ".text3opacity" is a CSS class while "#text3" is a CSS id.

This is the paragraph with id "text4". We can also update a division (for example, for the div with id="firstvisualdiv") by changing its opacity from 1 to 0 (defined by a CSS class "deactive"). In this way, the div disappears.

This paragraph does not trigger any MagicScroll scene. Sometime, you may do not want to set all triggers too close to each other. This would provide some time for the users to read and see the viz. You also need to properly arrange the length between each trigger to make sure there are sufficient space for the user to scroll.

This is the paragraph with id "text5". Now you can see we create a scene by changing this image's opacity. The process is similar that you can create a CSS class "img" for the image and then change its opacity when triggering "text5" paragraph.

Finally, you need to provide enough space for the user to scroll "text5" paragraph to pass the middle of your browser window (imagine there is a horizontal line defines the mid-point of your browser window). If you have an element at the very bottom of the page, you may never be able to "trigger" it to activate the scene. For example, we add a line break ("br") after this paragraph to provide enough space that ensures us to scroll "text5" to pass the lower half of the browser window. You can test this by delete this paragaph, then you won't be able to trigger the last scene.