• Stars
    star
    111
  • Rank 314,510 (Top 7 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A scrollytelling plugin for the Odyssey story format

Odyssey Scrollyteller

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.

Some text before the scrollytelling portion of the story starts.
#scrollyteller
[link to your interactive here]
A first paragraph of the scrollytelling experience.
#markIDone
A second section. These sections can be broken into multiple paragraphs and are divided by the '#mark' anchors.
The '#mark' anchors also act as waypoints for which Odyssey Scrollyteller will create events.
#markIDtwo
When 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).
#endscrollyteller
You can then carry on your story after the scrollytelling section.

Usage

To hook into the events, use some variation on this code:

// Initialise
const stage = document.querySelector('[selector-for-your-interactive] .scrollyteller-stage');

if (stage) {
    init({
        target: stage,
        detail: stage.__SCROLLYTELLER__
    });
} else {
    // console.log('waiting for the stage');
    document.addEventListener('mark', init);
}

function init(ev) {
    console.log(ev.target); // the stage element
    console.log(ev.detail); // the `activated` and `deactivated` marks (if any)
}

Configuration options

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).

Authors

More Repositories

1

data-life

Data collection and analysis to support a series of stories about data privacy.
HTML
537
star
2

d3-layout-narrative

A d3 layout for creating XKCD style narrative charts
JavaScript
187
star
3

north-korea-missile-map

A map of the world using D3 and Canvas showing missile ranges
HTML
56
star
4

scrollyteller

A React component for creating scrollyteller stories
HTML
33
star
5

aunty

A toolkit for working with ABC News projects
JavaScript
29
star
6

shrink-ray

Convert a video to optimised renditions in multiple aspect ratios, with the help of ffmpeg
TypeScript
15
star
7

census-100-people

Census 2016: This is Australia as 100 people
JavaScript
13
star
8

odyssey

Enhance feature-worthy stories
JavaScript
13
star
9

static-heatmaps

A simple static heatmap generator in javascript.
JavaScript
10
star
10

editorslab-2017

Our work at Walkleys/GEN Editors Lab Sydney event in 2017
CSS
7
star
11

chatfuel-google-sheet

Append values from ChatFuel to a Google Sheet
JavaScript
7
star
12

amazon-race-game

A game about being a picker in a warehouse
JavaScript
6
star
13

data-australian-political-donations

A data package about political donations in Australia.
Python
6
star
14

odyssey-360-scrollyteller

Use 360Β° image/video spheres with transitionable focal points as the graphical element of a scrollyteller
JavaScript
6
star
15

tcp-ping-sync

TCP ping utility with a synchronous API
JavaScript
5
star
16

spanify

Wrap text in span tags directly from within CoreMedia + more
JavaScript
4
star
17

svelte-scrollyteller

Scrollytelling, but in Svelte
Svelte
4
star
18

react-globe

A 3D D3 globe for React
JavaScript
4
star
19

story-lab-component-library

TypeScript
4
star
20

mostess

Quick 'n dirty HTTP server that serves up a configurable mix of dev & production resources.
JavaScript
4
star
21

elections-us2020-electoral-college

TypeScript
4
star
22

generator-aunty

Yeoman generators for Aunty projects
HTML
4
star
23

interactive-income-inequality

Income comparisons across Australia
JavaScript
4
star
24

reverse-geocoder

Svelte
3
star
25

groupyteller

A scrollyteller with grouped dots.
JavaScript
3
star
26

quiz-viewer

JavaScript
3
star
27

interactive-ssm-results

Explore the results of the same-sex marriage postal survey
JavaScript
3
star
28

chatfuel-feed-reader

An interactive RSS reader interface for Chatfuel & Messenger
JavaScript
3
star
29

interactive-kids-book

A kids book about kids books
HTML
3
star
30

interactive-untangling-the-climate-mess

Tangle animations and interactive panels in article
JavaScript
3
star
31

facebook-groups-messenger-bot

JavaScript
3
star
32

hey-stranger

Hey, stranger! What's on your phone?
JavaScript
3
star
33

fetchamd

A lightweight, mostly AMD module loader.
JavaScript
3
star
34

gemini

Grab another CoreMedia article to use dynamically in your story.
JavaScript
3
star
35

mount-utils

Utilities for working with mount points
TypeScript
3
star
36

geocoder

Browser based address lookup and geocoding based on GNAF data
TypeScript
3
star
37

es3-observ

An ES3-compatible rewrite of core 'observ' modules, exposed as a single API
JavaScript
3
star
38

interactive-ssm-turnout

Calculator: What will the same-sex marriage result be?
HTML
3
star
39

podyssey

A story format for synchronised podcast audio and visuals
JavaScript
3
star
40

jquery-avoidOrphans

A JQuery plugin that uses non-breaking spaces to ensure that single words aren't stranded on a new line. Useful for making blocks of text in a layout look at little more neat and tidy.
JavaScript
3
star
41

interactive-soundcite

Initialise a soundcite when you can't embed HTML.
JavaScript
3
star
42

env-utils

Utilities for identifying aspects of your code's execution environment and respectfully interacting with the DOM
TypeScript
2
star
43

interactive-debbie-tracker

Cyclone Debbie: Track north Queensland wind speeds as it crosses coast
JavaScript
2
star
44

scrollyteller-video

Maniplate a video as the background of a scrollyteller
TypeScript
2
star
45

odyssey-parallax

An Odyssey plugin for rendering a parallax section
TypeScript
2
star
46

chart-builder

Internal ABC News chart building tool
PHP
2
star
47

chatfuel-hearken-questions

Get questions from your Chatfuel audience to Hearken
JavaScript
2
star
48

url2cmid

Utility function for extracting a CMID from a URL
TypeScript
2
star
49

fuzzy-dates

Parse/compare fuzzy dates
JavaScript
2
star
50

abcnews.github.io

ABC News GitHub Pages
HTML
2
star
51

interactive-tell-me-another

A press-for-more revealing story collection
JavaScript
2
star
52

editors-lab-2018

Our work at Walkleys/GEN Editors Lab Sydney event in 2018
JavaScript
2
star
53

palette

Colour palettes for ABC News data visualisations
Svelte
2
star
54

interactive-coronavirus-growth-factor

JavaScript
2
star
55

encryption-explainer

Code for 'Tell me a secret'
JavaScript
2
star
56

google-doc-scrollyteller

A scrollyteller preview React component which loads, parses & renders Odyssey-like from a public Google Doc
TypeScript
2
star
57

interactive-fake-video-guesser

An ABC News Story Lab project
JavaScript
2
star
58

covid19-data-import-function

Fetch data and upload to the cloud
JavaScript
2
star
59

howlifehaschanged

How life has changed for people your age
JavaScript
2
star
60

interactive-ssm-map

A scrollyteller SSM map based on Vote Compass data
HTML
2
star
61

interactive-coronavirus-spread

Story: "What we can learn from the countries winning the coronavirus fight"
JavaScript
2
star
62

interactive-freezeframe

Odyssey plugin for Freezeframe Scrollytellers
HTML
2
star
63

hecs-help-debt-calculator

An embed for readers to help understand how their HECS/HELP debts will change due to indexation
TypeScript
2
star
64

chatfuel-webhook

A send-to-Slack webhook implementation for ChatFuel
JavaScript
2
star
65

elections-federal2022-lower-house

Story Lab's reporting on the 2022 federal election, as well as tools used to help produce those stories.
TypeScript
2
star
66

interactive-hear-me-out

Custom tabbed video interface and related elements for the article/video series
JavaScript
2
star
67

covid-victoria-roadmap

An embeddable chart which tracks the progress of Victoria's emergence from Covid-19 lockdown
Svelte
2
star
68

map-vector-tiles-federal-electorates-2019

2019 Australian Federal Electorate boundaries as vector tiles
1
star
69

sparker

Inline spark charts in CoreMedia articles
SCSS
1
star
70

terminus-fetch

Grab a document from the Preview / Live Terminus content API, based on the current execution domain
TypeScript
1
star
71

3d-graph-scrollyteller

Visualise a graph in 3D and explore with a camera linked to scroll
HTML
1
star
72

poll-counters

Manage our firebase poll-counters project
JavaScript
1
star
73

content-carousel

Svelte
1
star
74

interactive-oscars-predictions

Predict the outcome of the Oscars and compare against the rest of the audience.
CSS
1
star
75

elections-federal2022-scatterplots

TypeScript
1
star
76

interactive-private-health

JavaScript
1
star
77

newsweb-coding-exercise-2

TypeScript
1
star
78

video-thumbnailer

Video thumbnails from Core Media documents
JavaScript
1
star
79

odyssey-audio-visual-plugin

Legacy plugin, development continues in https://github.com/abcnews/interactive-plugins
TypeScript
1
star
80

simple-remove-tags

Hide a limited number of elements between #remove and #endremove tags
HTML
1
star
81

batch-resize-images

Batch resize images to fit a certain ratio & min-width
Shell
1
star
82

corona-days-since

JavaScript
1
star
83

data-life-crowdsource

JavaScript
1
star
84

news-20th-anniversary-flashback

A look back at the ABC News homepage 20 years ago, with today's content.
JavaScript
1
star
85

tiny-ducks

A small redux-style state management module
TypeScript
1
star
86

editorslab-final-2017

Work on a project for the Editors Lab final in Vienna, 2017
JavaScript
1
star
87

odyssey-tester

A quick eyeball tester for Odyssey development
HTML
1
star
88

hash-scripts-loader

TypeScript
1
star
89

story-lab-standup-bot

Determine who will run Story Lab standups
TypeScript
1
star
90

lively

An auto-play html5 video player for ABC News
JavaScript
1
star
91

webpacker

A simple Webpack builder
JavaScript
1
star
92

odyssey-emoji

Replace emoji in Odyssey stories with EmojiOne graphics
JavaScript
1
star
93

interactive-super-kamiokande

Scrollytelling components and illustrations from the ABC's Super Kamiokande feature
HTML
1
star
94

test-adventure-story-maker

A quick test story to demonstrate/build out the Adventure story builder
JavaScript
1
star
95

algorithms-transparency

An interactive story about algorithmic decision making
Svelte
1
star
96

jquery-accessibleSpinner

A jQuery plugin that replaces content with a spinner. It uses CSS and aria-live to notify screen readers to wait and announce when content has loaded.
JavaScript
1
star
97

base-36-text

Tools for encoding / decoding text to / from base36 strings
JavaScript
1
star
98

alternating-case-to-object

Convert an alternating cased string to a JSON object
TypeScript
1
star
99

interactive-gay-rights-map

A worldwide look at gay rights
HTML
1
star
100

composite-builder

A tool for building composite graphics
JavaScript
1
star