Name: odyssey-scrollyteller
Owner: ABC News
Description: A scrollytelling plugin for the Odyssey story format
Created: 2017-08-07 23:42:26.0
Updated: 2018-02-06 10:22:37.0
Pushed: 2017-11-13 04:49:46.0
Homepage: null
Size: 184
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
This module integrates with Odyssey to implement 'scrollytelling' sections in Odyssey based stories.
To use this, include it in the story along with the implementation of the visual element.
text before the scrollytelling portion of the story starts.
ollyteller
k to your interactive here]
rst paragraph of the scrollytelling experience.
kIDone
cond section. These sections can be broken into multiple paragraphs and are divided by the '#mark' anchors.
'#mark' anchors also act as waypoints for which Odyssey Scrollyteller will create events.
kIDtwo
the start of each section scrolls past the bottom of the viewport, a new event is fired on the background element (which can then bubble up the DOM, so you can listen for it anywhere).
scrollyteller
can then carry on your story after the scrollytelling section.
To hook into the events, use some variation on this code:
nitialise
t stage = document.querySelector('[selector-for-your-interactive] .scrollyteller-stage');
stage) {
it({
target: stage,
detail: stage.__SCROLLYTELLER__
;
se {
console.log('waiting for the stage');
cument.addEventListener('mark', init);
tion init(ev) {
console.log(ev.target); // the stage element
console.log(ev.detail); // the `activated` and `deactivated` marks (if any)
The opening #scrollyteller tag takes some options which are specified using an alternating case syntax. For example, the opening tag #scrollytellerHELLOworldMEANING42 will result in a config object which looks like:
hello: "world",
meaning: 42
The config options available are:
ALIGN (left|right): Align the content to the left or right when the screen is wide enough. Defaults to centre alignment.WAYPOINT (integer between 0 and 100): Defines where on the viewport (% distance from top) #mark events are triggered. Defaults to 80.There is also an option available on individual #mark tags.
PIECEMEAL (true): Sets all elements between this mark and the next to get their own visual container instead of being grouped together (the default behaviour).