JavaScript intersection detection plugin scrollama.js
How to Use
Basics
You can use this library to simply trigger steps for content such as dots. This is useful if you need more control over interactive elements or do not want to follow the sticky scrollytelling pattern.
You can use any ID/class naming convention you prefer. The HTML structure should look like this:
1 2 3 4 | <!--you don't need the "data-step" attr, but can be useful for storing instructions for JS --><div class='step' data-step='a'></div><div class='step' data-step='b'></div><div class='step' data-step='c'></div> |
1 2 3 4 5 6 7 8 9 10 11 | // Instantiate scrollamaconst scroller = Scrollama()// Set up the instance and pass callback functionsscroller.setup({ step: '.step', // Required offset: 0.5, // Offset (optional, default = 0.5) debug: false, // Debug (optional, default = false)}).onStepEnter(handleStepEnter).onStepExit(handleStepExit) |
Sticky graphic
To implement the sticky graphic scrollytelling pattern, you need the following three elements (container, graphic, step). The structure should look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- container = ".scroll" --><div class='scroll'> <!-- graphic = ".scroll__graphic" --> <div class='scroll__graphic'> <!--graphic / chart code here--> </div> <div class='scroll__text'> <!-- steps = ".step" --> <div class='step' data-step='a'></div> <div class='step' data-step='b'></div> <div class='step' data-step='c'></div> </div></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Instantiate scrollamaconst scroller = Scrollama()// Set up the instance and pass callback functionsscroller.setup({ step: '.scroll__text .step', // required container: '.scroll', // required (for sticky) graphic: '.scroll__graphic', // required (for sticky) offset: 0.5, // optional, default = 0.5 debug: false, // optional, default = false}).onStepEnter(handleStepEnter).onStepExit(handleStepExit).onContainerEnter(handleContainerEnter).onContainerExit(handleContainerExit) |
API
scrollama.setup([options])
step (string): Selector for the step elements that trigger changes. Required.
container (string): Selector for the element containing all scrolling content. Optional.
graphic (string): Selector for the graphic element that will become fixed. Optional.
offset (number, 0 - 1): Distance from the top of the viewport at which a step is triggered. (Default: 0.5)
progress (boolean): Whether to trigger incremental step progress updates. (Default: false)
debug (boolean): Whether to display visual debugging tools. (Default: false)