├── .gitignore
├── .npm-ignore
├── LICENSE
├── README.md
├── build
    ├── scrollama.js
    └── scrollama.min.js
├── dev
    ├── d3.v4.min.js
    ├── enable-disable.html
    ├── fixed-js.html
    ├── index.html
    ├── multiple.html
    ├── overflow-scroll-error.html
    ├── progress.html
    └── scroll-parent.html
├── docs
    ├── .nojekyll
    ├── basic
    │   └── index.html
    ├── custom-offset
    │   └── index.html
    ├── iframe
    │   ├── basic.html
    │   └── index.html
    ├── index.html
    ├── logo.png
    ├── mobile-pattern
    │   └── index.html
    ├── progress
    │   └── index.html
    ├── scrollama.min.js
    ├── sticky-overlay
    │   └── index.html
    ├── sticky-side
    │   └── index.html
    └── style.css
├── index.d.ts
├── index.js
├── package.json
├── rollup.config.js
└── src
    ├── createProgressThreshold.js
    ├── debug.js
    ├── dom.js
    ├── entry.js
    ├── err.js
    ├── generateId.js
    ├── getIndex.js
    ├── getOffsetTop.js
    ├── indexSteps.js
    ├── parseOffset.js
    └── scroll.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | package-lock.json


--------------------------------------------------------------------------------
/.npm-ignore:
--------------------------------------------------------------------------------
1 | dev/
2 | docs/
3 | build/scrollama.js
4 | rollup.config.*
5 | .gitignore
6 | .travis.yml
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 | 
3 | Copyright (c) 2022 Russell Samora
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <img src="https://russellsamora.github.io/scrollama/logo.png" width="160" alt="scrollama.js"/>
  2 | 
  3 | **Scrollama** is a modern & lightweight JavaScript library for scrollytelling
  4 | using
  5 | [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
  6 | in favor of scroll events. *Current version: 3.2.0*
  7 | 
  8 | ## 3.0
  9 | #### Why 3.0?
 10 | The core parts of the Scrollama code base are being refactored for 3.0 to simplfy and clarify the logic. The goal behind this to ease make future maintainance, bug fixing, and feature additions easier moving forward.
 11 | 
 12 | #### New Fetaures
 13 | * Built-in resize using resize observers.
 14 | * Custom offsets on steps with data attributes
 15 | 
 16 | #### Deprecated Features
 17 | * the `order` option
 18 | 
 19 | ## Important Changes
 20 | - **Version 3.0.0+**: `order` has been deprecated.
 21 | - **Version 2.0.0+**: `.onContainerEnter` and `.onContainerExit` have been deprecated in favor of CSS property `position: sticky;`. [How to use position sticky.](https://pudding.cool/process/scrollytelling-sticky/)
 22 | - **Version 1.4.0+**: you must manually add the IntersectionObserver polyfill for cross-browser support. See [installation](https://github.com/russellsamora/scrollama#installation) for details.
 23 | 
 24 | [Jump to examples.](https://github.com/russellsamora/scrollama#examples)
 25 | 
 26 | ## Why?
 27 | 
 28 | Scrollytelling can be complicated to implement and difficult to make performant.
 29 | The goal of this library is to provide a simple interface for creating
 30 | scroll-driven interactives. Scrollama is focused on performance by using
 31 | [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
 32 | to handle element position detection.
 33 | 
 34 | [![scrollytelling pattern](https://thumbs.gfycat.com/FearfulHotArabianoryx-size_restricted.gif)](https://pudding.cool/process/how-to-implement-scrollytelling)
 35 | 
 36 | ## Examples
 37 | 
 38 | _Note: most of these examples use D3 to keep the code concise, but this can be used
 39 | with any library, or with no library at all._
 40 | 
 41 | - [Basic](https://russellsamora.github.io/scrollama/basic) - just step
 42 |   triggers
 43 | - [Progress](https://russellsamora.github.io/scrollama/progress) -
 44 |   incremental step progress callback
 45 | - [Sticky Graphic (Side by Side)](https://russellsamora.github.io/scrollama/sticky-side) -
 46 |   using CSS `position: sticky;` to create a fixed graphic to the side of the text.
 47 | - [Sticky Graphic (Overlay)](https://russellsamora.github.io/scrollama/sticky-overlay) -
 48 |   using CSS `position: sticky;` to create a fixed graphic with fullscreen graphic with text overlayed.
 49 | - [Custom Offset](https://russellsamora.github.io/scrollama/custom-offset) -
 50 |   Adding a data attribute to an element to provide a unique offset for a step.
 51 | - [Mobile Pattern](https://russellsamora.github.io/scrollama/mobile-pattern) -
 52 |   using pixels instead of percent for offset value so it doesn't jump around on scroll direction change
 53 | - [iframe Embed](https://russellsamora.github.io/scrollama/iframe) -
 54 |   Embedding a Scrollama instance inside an iframe using `root` option
 55 | 
 56 | ## Installation
 57 | **Note: As of version 1.4.0, the IntersectionObserver polyfill has been removed from the build. You must include it yourself for cross-browser support.** Check [here](https://caniuse.com/#feat=intersectionobserver) to see if you need to include the polyfill.
 58 | 
 59 | Old school (exposes the `scrollama` global):
 60 | 
 61 | ```html
 62 | <script src="https://unpkg.com/scrollama"></script>
 63 | ```
 64 | 
 65 | New school:
 66 | 
 67 | ```sh
 68 | npm install scrollama intersection-observer --save
 69 | ```
 70 | 
 71 | And then import/require it:
 72 | 
 73 | ```js
 74 | import scrollama from "scrollama"; // or...
 75 | const scrollama = require("scrollama");
 76 | ```
 77 | 
 78 | ## How to use
 79 | 
 80 | #### Basic
 81 | 
 82 | You can use this library to simply trigger steps, similar to something like
 83 | [Waypoints](http://imakewebthings.com/waypoints/). This is useful if you need
 84 | more control over your interactive, or you don't want to follow the sticky
 85 | scrollytelling pattern.
 86 | 
 87 | You can use any id/class naming conventions you want. The HTML structure should
 88 | look like:
 89 | 
 90 | ```html
 91 | <!--you don't need the "data-step" attr, but can be useful for storing instructions for JS -->
 92 | <div class="step" data-step="a"></div>
 93 | <div class="step" data-step="b"></div>
 94 | <div class="step" data-step="c"></div>
 95 | ```
 96 | 
 97 | ```js
 98 | // instantiate the scrollama
 99 | const scroller = scrollama();
100 | 
101 | // setup the instance, pass callback functions
102 | scroller
103 |   .setup({
104 |     step: ".step",
105 |   })
106 |   .onStepEnter((response) => {
107 |     // { element, index, direction }
108 |   })
109 |   .onStepExit((response) => {
110 |     // { element, index, direction }
111 |   });
112 | ```
113 | 
114 | ## API
115 | 
116 | #### scrollama.setup([options])
117 | 
118 | _options:_
119 | 
120 | | Option  | Type | Description | Default |
121 | | --- | --- | --- | --- |
122 | | step | string or HTMLElement[] | **required**  Selector (or array of elements) for the step elements that will trigger changes. |
123 | | offset | number (0 - 1, or string with "px") | How far from the top of the viewport to trigger a step. | 0.5 |
124 | | progress | boolean | Whether to fire incremental step progress updates or not. | false |
125 | | threshold | number (1 or higher) | The granularity of the progress interval in pixels (smaller = more granular). | 4 |
126 | | once | boolean | Only trigger the step to enter once then remove listener. | false || 
127 | | debug | boolean | Whether to show visual debugging tools or not. | false |
128 | | parent | HTMLElement[] | Parent element for step selector (use if you steps are in shadow DOM). | undefined |
129 | | container | HTMLElement | Parent element for the scroll story (use if scrollama is nested in a HTML element with overflow set to `scroll` or `auto`) | undefined |
130 | | root | HTMLElement | The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null. See more details about usage of root on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_concepts_and_usage). | undefined |
131 | 
132 | #### scrollama.onStepEnter(callback)
133 | 
134 | Callback that fires when the top or bottom edge of a step element enters the
135 | offset threshold.
136 | 
137 | The argument of the callback is an object: `{ element: DOMElement, index: number, direction: string }`
138 | 
139 | `element`: The step element that triggered
140 | 
141 | `index`: The index of the step of all steps
142 | 
143 | `direction`: 'up' or 'down'
144 | 
145 | #### scrollama.onStepExit(callback)
146 | 
147 | Callback that fires when the top or bottom edge of a step element exits the
148 | offset threshold.
149 | 
150 | The argument of the callback is an object: `{ element: DOMElement, index: number, direction: string }`
151 | 
152 | `element`: The step element that triggered
153 | 
154 | `index`: The index of the step of all steps
155 | 
156 | `direction`: 'up' or 'down'
157 | 
158 | #### scrollama.onStepProgress(callback)
159 | 
160 | Callback that fires the progress (0 - 1) a step has made through the threshold.
161 | 
162 | The argument of the callback is an object: `{ element: DOMElement, index: number, progress: number }`
163 | 
164 | `element`: The step element that triggered
165 | 
166 | `index`: The index of the step of all steps
167 | 
168 | `progress`: The percent of completion of the step (0 - 1)
169 | 
170 | `direction`: 'up' or 'down'
171 | 
172 | #### scrollama.offsetTrigger([number or string])
173 | 
174 | Get or set the offset percentage. Value must be between 0-1 (where 0 = top of viewport, 1 = bottom), or a string that includes "px" (e.g., "200px"). If set, returns the scrollama instance.
175 | 
176 | #### scrollama.resize()
177 | 
178 | **This is no longer necessary with the addition of a built-in resize observer**. Tell scrollama to get latest dimensions the browser/DOM. It is best practice to
179 | throttle resize in your code, update the DOM elements, then call this function
180 | at the end.
181 | 
182 | #### scrollama.enable()
183 | 
184 | Tell scrollama to resume observing for trigger changes. Only necessary to call
185 | if you have previously disabled.
186 | 
187 | #### scrollama.disable()
188 | 
189 | Tell scrollama to stop observing for trigger changes.
190 | 
191 | #### scrollama.destroy()
192 | 
193 | Removes all observers and callback functions.
194 | 
195 | #### custom offset
196 | 
197 | To override the offset passed in the options, set a custom offset for an individual element using data attributes. For example: `<div class="step" data-offset="0.25">` or `data-offset="100px"`.
198 | 
199 | ## Scrollama In The Wild
200 | * [The Billionaire Playbook - ProPublica](https://www.propublica.org/article/the-billionaire-playbook-how-sports-owners-use-their-teams-to-avoid-millions-in-taxes)
201 | * [Women's Pockets are Inferior - The Pudding](https://pudding.cool/2018/08/pockets/)
202 | * [Trump approval rating - Politico](https://www.politico.com/interactives/2019/trump-approval-rating-polls/)
203 | * [How the opioid epidemic evolved - Washington Post](https://www.washingtonpost.com/graphics/2019/investigations/opioid-pills-overdose-analysis/)
204 | * [US Covid-19 deaths, explained in 8 charts and maps - Vox](https://www.vox.com/22252693/covid-19-deaths-us-who-died)
205 | * [Life After Death on Wikipedia - The Pudding](https://pudding.cool/2018/08/wiki-death/)
206 | * [YouTube With Me - YouTube](https://youtube.com/trends/articles/with-me-interactive/)
207 | * [Unchecked Power - ProPublica](https://projects.propublica.org/nypd-unchecked-power/) 
208 | * [Trump's environmental policies rule only part of America - Politico](https://www.politico.com/interactives/2018/trump-environmental-policies-rollbacks/)
209 | * [The story of New Zealand’s Covid-19 lockdown, in graphs - Stuff](https://interactives.stuff.co.nz/2020/05/coronavirus-covid-19-data-new-zealand/)
210 | * [Trump and Biden's Paths to Victory in the 2020 Election - Wall Street Journal](https://www.wsj.com/graphics/the-paths-to-victory/)
211 | * [The sicence of superspreading - Science](https://vis.sciencemag.org/covid-clusters/)
212 | * [El dominio histórico de la derecha en Madrid - elDiario.es](https://www.eldiario.es/madrid/gana-derecha-elecciones-madrid-mayoritaria-30-rico_1_7347696.html)
213 | * [The Permutation Test - Jared Wilber](https://www.jwilber.me/permutationtest/)
214 | * [Constellations - Nadieh Bremer](https://nbremer.github.io/planet-constellations/)
215 | * [Remote Triggering of Earthquakes - Will Chase](https://www.williamrchase.com/vizrisk/vizrisk_main/)
216 | * [Scrollytelling - Mapbox](https://demos.mapbox.com/scrollytelling/)
217 | 
218 | ## Tips
219 | - Avoid using `viewport height` (vh) in your CSS because scrolling up and down constantly triggers vh to change, which will also trigger a window resize.
220 | 
221 | ## Alternatives
222 | - [Scroll Trigger](https://greensock.com/scrolltrigger/)
223 | - [Waypoints](http://imakewebthings.com/waypoints/)
224 | - [ScrollMagic](http://scrollmagic.io/)
225 | - [graph-scroll.js](https://1wheel.github.io/graph-scroll/)
226 | - [ScrollStory](https://sjwilliams.github.io/scrollstory/)
227 | - [enter-view](https://github.com/russellsamora/enter-view)
228 | 
229 | ## Logo
230 | 
231 | Logo by the awesome [Elaina Natario](https://twitter.com/elainanatario)
232 | 
233 | ## License
234 | 
235 | MIT License
236 | 
237 | Copyright (c) 2022 Russell Samora
238 | 
239 | Permission is hereby granted, free of charge, to any person obtaining a copy of
240 | this software and associated documentation files (the "Software"), to deal in
241 | the Software without restriction, including without limitation the rights to
242 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
243 | the Software, and to permit persons to whom the Software is furnished to do so,
244 | subject to the following conditions:
245 | 
246 | The above copyright notice and this permission notice shall be included in all
247 | copies or substantial portions of the Software.
248 | 
249 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
250 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
251 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
252 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
253 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
254 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
255 | 


--------------------------------------------------------------------------------
/build/scrollama.js:
--------------------------------------------------------------------------------
  1 | (function (global, factory) {
  2 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3 |   typeof define === 'function' && define.amd ? define(factory) :
  4 |   (global = global || self, global.scrollama = factory());
  5 | }(this, (function () { 'use strict';
  6 | 
  7 |   // DOM helper functions
  8 | 
  9 |   // public
 10 |   function selectAll(selector, parent = document) {
 11 |     if (typeof selector === 'string') {
 12 |       return Array.from(parent.querySelectorAll(selector));
 13 |     } else if (selector instanceof Element) {
 14 |       return [selector];
 15 |     } else if (selector instanceof NodeList) {
 16 |       return Array.from(selector);
 17 |     } else if (selector instanceof Array) {
 18 |       return selector;
 19 |     }
 20 |     return [];
 21 |   }
 22 | 
 23 |   // SETUP
 24 |   function create(className) {
 25 |   	const el = document.createElement("div");
 26 |   	el.className = `scrollama__debug-step ${className}`;
 27 |   	el.style.position = "fixed";
 28 |   	el.style.left = "0";
 29 |   	el.style.width = "100%";
 30 |   	el.style.zIndex = "9999";
 31 |   	el.style.borderTop = "2px solid black";
 32 |   	el.style.borderBottom = "2px solid black";
 33 | 
 34 |   	const p = document.createElement("p");
 35 |   	p.style.position = "absolute";
 36 |   	p.style.left = "0";
 37 |   	p.style.height = "1px";
 38 |   	p.style.width = "100%";
 39 |   	p.style.borderTop = "1px dashed black";
 40 | 
 41 |   	el.appendChild(p);
 42 |   	document.body.appendChild(el);
 43 |   	return el;
 44 |   }
 45 | 
 46 |   // UPDATE
 47 |   function update({ id, step, marginTop }) {
 48 |   	const { index, height } = step;
 49 |   	const className = `scrollama__debug-step--${id}-${index}`;
 50 |   	let el = document.querySelector(`.${className}`);
 51 |   	if (!el) el = create(className);
 52 | 
 53 |   	el.style.top = `${marginTop * -1}px`;
 54 |   	el.style.height = `${height}px`;
 55 |   	el.querySelector("p").style.top = `${height / 2}px`;
 56 |   }
 57 | 
 58 |   function generateId() {
 59 |       const alphabet = "abcdefghijklmnopqrstuvwxyz";
 60 |       const date = Date.now();
 61 |       const result = [];
 62 |       for (let i = 0; i < 6; i += 1) {
 63 |         const char = alphabet[Math.floor(Math.random() * alphabet.length)];
 64 |         result.push(char);
 65 |       }
 66 |       return `${result.join("")}${date}`;
 67 |     }
 68 | 
 69 |   function err$1(msg) {
 70 |   	console.error(`scrollama error: ${msg}`);
 71 |   }
 72 | 
 73 |   function getIndex(node) {
 74 |   	return +node.getAttribute("data-scrollama-index");
 75 |   }
 76 | 
 77 |   function createProgressThreshold(height, threshold) {
 78 |       const count = Math.ceil(height / threshold);
 79 |       const t = [];
 80 |       const ratio = 1 / count;
 81 |       for (let i = 0; i < count + 1; i += 1) {
 82 |         t.push(i * ratio);
 83 |       }
 84 |       return t;
 85 |     }
 86 | 
 87 |   function parseOffset(x) {
 88 |   	if (typeof x === "string" && x.indexOf("px") > 0) {
 89 |   		const v = +x.replace("px", "");
 90 |   		if (!isNaN(v)) return { format: "pixels", value: v };
 91 |   		else {
 92 |   			err("offset value must be in 'px' format. Fallback to 0.5.");
 93 |   			return { format: "percent", value: 0.5 };
 94 |   		}
 95 |   	} else if (typeof x === "number" || !isNaN(+x)) {
 96 |   		if (x > 1) err("offset value is greater than 1. Fallback to 1.");
 97 |   		if (x < 0) err("offset value is lower than 0. Fallback to 0.");
 98 |   		return { format: "percent", value: Math.min(Math.max(0, x), 1) };
 99 |   	}
100 |   	return null;
101 |   }
102 | 
103 |   function indexSteps(steps) {
104 |   	steps.forEach((step) =>
105 |   		step.node.setAttribute("data-scrollama-index", step.index)
106 |   	);
107 |   }
108 | 
109 |   function getOffsetTop(node) {
110 |     const { top } = node.getBoundingClientRect();
111 |     const scrollTop = window.pageYOffset;
112 |     const clientTop = document.body.clientTop || 0;
113 |     return top + scrollTop - clientTop;
114 |   }
115 | 
116 |   let currentScrollY;
117 |   let comparisonScrollY;
118 |   let direction;
119 | 
120 |   function onScroll(container) {
121 |   	const scrollTop = container ? container.scrollTop : window.pageYOffset;
122 | 
123 |   	if (currentScrollY === scrollTop) return;
124 |   	currentScrollY = scrollTop;
125 |   	if (currentScrollY > comparisonScrollY) direction = "down";
126 |   	else if (currentScrollY < comparisonScrollY) direction = "up";
127 |   	comparisonScrollY = currentScrollY;
128 |   }
129 | 
130 |   function setupScroll(container) {
131 |   	currentScrollY = 0;
132 |   	comparisonScrollY = 0;
133 |   	document.addEventListener("scroll", () => onScroll(container));
134 |   }
135 | 
136 |   function scrollama() {
137 |   	let cb = {};
138 | 
139 |   	let id = generateId();
140 |   	let steps = [];
141 |   	let globalOffset;
142 |   	let containerElement;
143 |   	let rootElement;
144 | 
145 |   	let progressThreshold = 0;
146 | 
147 |   	let isEnabled = false;
148 |   	let isProgress = false;
149 |   	let isDebug = false;
150 |   	let isTriggerOnce = false;
151 | 
152 |   	let exclude = [];
153 | 
154 |   	/* HELPERS */
155 |   	function reset() {
156 |   		cb = {
157 |   			stepEnter: () => { },
158 |   			stepExit: () => { },
159 |   			stepProgress: () => { },
160 |   		};
161 |   		exclude = [];
162 |   	}
163 | 
164 |   	function handleEnable(shouldEnable) {
165 |   		if (shouldEnable && !isEnabled) updateObservers();
166 |   		if (!shouldEnable && isEnabled) disconnectObservers();
167 |   		isEnabled = shouldEnable;
168 |   	}
169 | 
170 |   	/* NOTIFY CALLBACKS */
171 |   	function notifyProgress(element, progress) {
172 |   		const index = getIndex(element);
173 |   		const step = steps[index];
174 |   		if (progress !== undefined) step.progress = progress;
175 |   		const response = { element, index, progress, direction };
176 |   		if (step.state === "enter") cb.stepProgress(response);
177 |   	}
178 | 
179 |   	function notifyStepEnter(element, check = true) {
180 |   		const index = getIndex(element);
181 |   		const step = steps[index];
182 |   		const response = { element, index, direction };
183 | 
184 |   		step.direction = direction;
185 |   		step.state = "enter";
186 | 
187 |   		// if (isPreserveOrder && check && direction !== "up")
188 |   		//   notifyOthers(index, "above");
189 |   		// if (isPreserveOrder && check && direction === "up")
190 |   		//   notifyOthers(index, "below");
191 | 
192 |   		if (!exclude[index]) cb.stepEnter(response);
193 |   		if (isTriggerOnce) exclude[index] = true;
194 |   	}
195 | 
196 |   	function notifyStepExit(element, check = true) {
197 |   		const index = getIndex(element);
198 |   		const step = steps[index];
199 | 
200 |   		if (!step.state) return false;
201 | 
202 |   		const response = { element, index, direction };
203 | 
204 |   		if (isProgress) {
205 |   			if (direction === "down" && step.progress < 1) notifyProgress(element, 1);
206 |   			else if (direction === "up" && step.progress > 0)
207 |   				notifyProgress(element, 0);
208 |   		}
209 | 
210 |   		step.direction = direction;
211 |   		step.state = "exit";
212 | 
213 |   		cb.stepExit(response);
214 |   	}
215 | 
216 |   	/* OBSERVERS - HANDLING */
217 |   	function resizeStep([entry]) {
218 |   		const index = getIndex(entry.target);
219 |   		const step = steps[index];
220 |   		const h = entry.target.offsetHeight;
221 |   		if (h !== step.height) {
222 |   			step.height = h;
223 |   			disconnectObserver(step);
224 |   			updateStepObserver(step);
225 |   			updateResizeObserver(step);
226 |   		}
227 |   	}
228 | 
229 |   	function intersectStep([entry]) {
230 |   		onScroll(containerElement);
231 | 
232 |   		const { isIntersecting, target } = entry;
233 |   		if (isIntersecting) notifyStepEnter(target);
234 |   		else notifyStepExit(target);
235 |   	}
236 | 
237 |   	function intersectProgress([entry]) {
238 |   		const index = getIndex(entry.target);
239 |   		const step = steps[index];
240 |   		const { isIntersecting, intersectionRatio, target } = entry;
241 |   		if (isIntersecting && step.state === "enter")
242 |   			notifyProgress(target, intersectionRatio);
243 |   	}
244 | 
245 |   	/*  OBSERVERS - CREATION */
246 |   	function disconnectObserver({ observers }) {
247 |   		Object.keys(observers).map((name) => {
248 |   			observers[name].disconnect();
249 |   		});
250 |   	}
251 | 
252 |   	function disconnectObservers() {
253 |   		steps.forEach(disconnectObserver);
254 |   	}
255 | 
256 |   	function updateResizeObserver(step) {
257 |   		const observer = new ResizeObserver(resizeStep);
258 |   		observer.observe(step.node);
259 |   		step.observers.resize = observer;
260 |   	}
261 | 
262 |   	function updateResizeObservers() {
263 |   		steps.forEach(updateResizeObserver);
264 |   	}
265 | 
266 |   	function updateStepObserver(step) {
267 |   		const h = window.innerHeight;
268 |   		const off = step.offset || globalOffset;
269 |   		const factor = off.format === "pixels" ? 1 : h;
270 |   		const offset = off.value * factor;
271 |   		const marginTop = step.height / 2 - offset;
272 |   		const marginBottom = step.height / 2 - (h - offset);
273 |   		const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
274 |   		const root = rootElement;
275 | 
276 |   		const threshold = 0.5;
277 |   		const options = { rootMargin, threshold, root };
278 |   		const observer = new IntersectionObserver(intersectStep, options);
279 | 
280 |   		observer.observe(step.node);
281 |   		step.observers.step = observer;
282 | 
283 |   		if (isDebug) update({ id, step, marginTop, marginBottom });
284 |   	}
285 | 
286 |   	function updateStepObservers() {
287 |   		steps.forEach(updateStepObserver);
288 |   	}
289 | 
290 |   	function updateProgressObserver(step) {
291 |   		const h = window.innerHeight;
292 |   		const off = step.offset || globalOffset;
293 |   		const factor = off.format === "pixels" ? 1 : h;
294 |   		const offset = off.value * factor;
295 |   		const marginTop = -offset + step.height;
296 |   		const marginBottom = offset - h;
297 |   		const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
298 | 
299 |   		const threshold = createProgressThreshold(step.height, progressThreshold);
300 |   		const options = { rootMargin, threshold };
301 |   		const observer = new IntersectionObserver(intersectProgress, options);
302 | 
303 |   		observer.observe(step.node);
304 |   		step.observers.progress = observer;
305 |   	}
306 | 
307 |   	function updateProgressObservers() {
308 |   		steps.forEach(updateProgressObserver);
309 |   	}
310 | 
311 |   	function updateObservers() {
312 |   		disconnectObservers();
313 |   		updateResizeObservers();
314 |   		updateStepObservers();
315 |   		if (isProgress) updateProgressObservers();
316 |   	}
317 | 
318 |   	/* SETUP */
319 |   	const S = {};
320 | 
321 |   	S.setup = ({
322 |   		step,
323 |   		parent,
324 |   		offset = 0.5,
325 |   		threshold = 4,
326 |   		progress = false,
327 |   		once = false,
328 |   		debug = false,
329 |   		container = undefined,
330 |   		root = null
331 |   	}) => {
332 | 
333 |   		setupScroll(container);
334 | 
335 |   		steps = selectAll(step, parent).map((node, index) => ({
336 |   			index,
337 |   			direction: undefined,
338 |   			height: node.offsetHeight,
339 |   			node,
340 |   			observers: {},
341 |   			offset: parseOffset(node.dataset.offset),
342 |   			top: getOffsetTop(node),
343 |   			progress: 0,
344 |   			state: undefined,
345 |   		}));
346 | 
347 |   		if (!steps.length) {
348 |   			err$1("no step elements");
349 |   			return S;
350 |   		}
351 | 
352 |   		isProgress = progress;
353 |   		isTriggerOnce = once;
354 |   		isDebug = debug;
355 |   		progressThreshold = Math.max(1, +threshold);
356 |   		globalOffset = parseOffset(offset);
357 |   		containerElement = container;
358 |   		rootElement = root;
359 | 
360 |   		reset();
361 |   		indexSteps(steps);
362 |   		handleEnable(true);
363 |   		return S;
364 |   	};
365 | 
366 |   	S.enable = () => {
367 |   		handleEnable(true);
368 |   		return S;
369 |   	};
370 | 
371 |   	S.disable = () => {
372 |   		handleEnable(false);
373 |   		return S;
374 |   	};
375 | 
376 |   	S.destroy = () => {
377 |   		handleEnable(false);
378 |   		reset();
379 |   		return S;
380 |   	};
381 | 
382 |   	S.resize = () => {
383 |   		updateObservers();
384 |   		return S;
385 |   	};
386 | 
387 |   	S.offset = (x) => {
388 |   		if (x === null || x === undefined) return globalOffset.value;
389 |   		globalOffset = parseOffset(x);
390 |   		updateObservers();
391 |   		return S;
392 |   	};
393 | 
394 |   	S.onStepEnter = (f) => {
395 |   		if (typeof f === "function") cb.stepEnter = f;
396 |   		else err$1("onStepEnter requires a function");
397 |   		return S;
398 |   	};
399 | 
400 |   	S.onStepExit = (f) => {
401 |   		if (typeof f === "function") cb.stepExit = f;
402 |   		else err$1("onStepExit requires a function");
403 |   		return S;
404 |   	};
405 | 
406 |   	S.onStepProgress = (f) => {
407 |   		if (typeof f === "function") cb.stepProgress = f;
408 |   		else err$1("onStepProgress requires a function");
409 |   		return S;
410 |   	};
411 |   	return S;
412 |   }
413 | 
414 |   return scrollama;
415 | 
416 | })));
417 | 


--------------------------------------------------------------------------------
/build/scrollama.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).scrollama=t()}(this,function(){"use strict";function k({id:e,step:t,marginTop:o}){var{index:n,height:t}=t,n=`scrollama__debug-step--${e}-${n}`;let r=document.querySelector(`.${n}`);r=r||function(e){const t=document.createElement("div");t.className=`scrollama__debug-step ${e}`,t.style.position="fixed",t.style.left="0",t.style.width="100%",t.style.zIndex="9999",t.style.borderTop="2px solid black",t.style.borderBottom="2px solid black";const o=document.createElement("p");return o.style.position="absolute",o.style.left="0",o.style.height="1px",o.style.width="100%",o.style.borderTop="1px dashed black",t.appendChild(o),document.body.appendChild(t),t}(n),r.style.top=`${-1*o}px`,r.style.height=`${t}px`,r.querySelector("p").style.top=`${t/2}px`}function M(e){console.error(`scrollama error: ${e}`)}function q(e){return+e.getAttribute("data-scrollama-index")}function O(e){if("string"==typeof e&&0<e.indexOf("px")){var t=+e.replace("px","");return isNaN(t)?(err("offset value must be in 'px' format. Fallback to 0.5."),{format:"percent",value:.5}):{format:"pixels",value:t}}return"number"!=typeof e&&isNaN(+e)?null:(1<e&&err("offset value is greater than 1. Fallback to 1."),e<0&&err("offset value is lower than 0. Fallback to 0."),{format:"percent",value:Math.min(Math.max(0,e),1)})}let A,N,T;function z(e){e=e?e.scrollTop:window.pageYOffset;A!==e&&(A=e,A>N?T="down":A<N&&(T="up"),N=A)}return function(){let r={},i=function(){var t="abcdefghijklmnopqrstuvwxyz",e=Date.now();const o=[];for(let e=0;e<6;e+=1){var n=t[Math.floor(Math.random()*t.length)];o.push(n)}return`${o.join("")}${e}`}(),f=[],p,u,d,h=0,t=!1,g=!1,m=!1,v=!1,n=[];function x(){r={stepEnter:()=>{},stepExit:()=>{},stepProgress:()=>{}},n=[]}function b(e){e&&!t&&$(),!e&&t&&y(),t=e}function s(e,t){var o=q(e);const n=f[o];void 0!==t&&(n.progress=t);t={element:e,index:o,progress:t,direction:T};"enter"===n.state&&r.stepProgress(t)}function o([e]){var t=q(e.target);const o=f[t];e=e.target.offsetHeight;e!==o.height&&(o.height=e,l(o),w(o),E(o))}function a([e]){z(u);var{isIntersecting:t,target:e}=e;(t?function(e){var t=q(e);const o=f[t];e={element:e,index:t,direction:T},o.direction=T,o.state="enter",n[t]||r.stepEnter(e),v&&(n[t]=!0)}:function(e){var t=q(e);const o=f[t];o.state&&(t={element:e,index:t,direction:T},g&&("down"===T&&o.progress<1?s(e,1):"up"===T&&0<o.progress&&s(e,0)),o.direction=T,o.state="exit",r.stepExit(t))})(e)}function c([e]){var t=q(e.target),o=f[t],{isIntersecting:n,intersectionRatio:t,target:e}=e;n&&"enter"===o.state&&s(e,t)}function l({observers:t}){Object.keys(t).map(e=>{t[e].disconnect()})}function y(){f.forEach(l)}function E(e){const t=new ResizeObserver(o);t.observe(e.node),e.observers.resize=t}function w(e){var t=window.innerHeight,o=e.offset||p,n="pixels"===o.format?1:t,r=o.value*n,o=e.height/2-r,n=e.height/2-(t-r),t=`${o}px 0px ${n}px 0px`,r=d;const s=new IntersectionObserver(a,{rootMargin:t,threshold:.5,root:r});s.observe(e.node),e.observers.step=s,m&&k({id:i,step:e,marginTop:o,marginBottom:n})}function e(e){var t=window.innerHeight,o=e.offset||p,n="pixels"===o.format?1:t,n=o.value*n,n=`${-n+e.height}px 0px ${n-t}px 0px`,t=function(e,t){var o=Math.ceil(e/t);const n=[];var r=1/o;for(let e=0;e<o+1;e+=1)n.push(e*r);return n}(e.height,h);const r=new IntersectionObserver(c,{rootMargin:n,threshold:t});r.observe(e.node),e.observers.progress=r}function $(){y(),f.forEach(E),f.forEach(w),g&&f.forEach(e)}const S={};return S.setup=({step:e,parent:t,offset:o=.5,threshold:n=4,progress:r=!1,once:s=!1,debug:i=!1,container:a=void 0,root:c=null})=>{var l;return l=a,A=0,N=0,document.addEventListener("scroll",()=>z(l)),f=([e,t=document]=[e,t],("string"==typeof e?Array.from(t.querySelectorAll(e)):e instanceof Element?[e]:e instanceof NodeList?Array.from(e):e instanceof Array?e:[]).map((e,t)=>({index:t,direction:void 0,height:e.offsetHeight,node:e,observers:{},offset:O(e.dataset.offset),top:function(e){var{top:e}=e.getBoundingClientRect();return e+window.pageYOffset-(document.body.clientTop||0)}(e),progress:0,state:void 0}))),f.length?(g=r,v=s,m=i,h=Math.max(1,+n),p=O(o),u=a,d=c,x(),f.forEach(e=>e.node.setAttribute("data-scrollama-index",e.index)),b(!0)):M("no step elements"),S},S.enable=()=>(b(!0),S),S.disable=()=>(b(!1),S),S.destroy=()=>(b(!1),x(),S),S.resize=()=>($(),S),S.offset=e=>null==e?p.value:(p=O(e),$(),S),S.onStepEnter=e=>("function"==typeof e?r.stepEnter=e:M("onStepEnter requires a function"),S),S.onStepExit=e=>("function"==typeof e?r.stepExit=e:M("onStepExit requires a function"),S),S.onStepProgress=e=>("function"==typeof e?r.stepProgress=e:M("onStepProgress requires a function"),S),S}});
2 | 


--------------------------------------------------------------------------------
/dev/enable-disable.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama Demo: Enable/Disable</title>
  8 | 	<meta name="description" content="Scrollama Demo: Basic" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<style>
 11 | 		/* default / demo page */
 12 | 
 13 | 		* {
 14 | 			box-sizing: border-box;
 15 | 		}
 16 | 
 17 | 		html,
 18 | 		body {
 19 | 			margin: 0;
 20 | 			padding: 0;
 21 | 			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 22 | 				Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 23 | 		}
 24 | 
 25 | 		body {
 26 | 			min-height: 1280px;
 27 | 			font-weight: 300;
 28 | 			color: #2a2a2a;
 29 | 		}
 30 | 
 31 | 		p,
 32 | 		h1,
 33 | 		h2,
 34 | 		h3,
 35 | 		h4,
 36 | 		a {
 37 | 			margin: 0;
 38 | 			font-weight: 300;
 39 | 		}
 40 | 
 41 | 		a,
 42 | 		a:visited,
 43 | 		a:hover {
 44 | 			color: #f30;
 45 | 			text-decoration: none;
 46 | 			border-bottom: 1px solid currentColor;
 47 | 		}
 48 | 
 49 | 		#eventsToggle {
 50 | 			margin: 30px;
 51 | 			font-size: 1.5rem;
 52 | 		}
 53 | 
 54 | 		#intro {
 55 | 			max-width: 40rem;
 56 | 			margin: 1rem auto;
 57 | 			text-align: center;
 58 | 		}
 59 | 
 60 | 		.intro__overline {
 61 | 			font-size: 1.4rem;
 62 | 		}
 63 | 
 64 | 		.intro__hed {
 65 | 			font-size: 1.4rem;
 66 | 			margin: 1.5rem auto;
 67 | 			text-transform: uppercase;
 68 | 			font-weight: 900;
 69 | 			letter-spacing: 0.05em;
 70 | 		}
 71 | 
 72 | 		.intro__dek {
 73 | 			font-size: 1.4rem;
 74 | 		}
 75 | 
 76 | 		/* demo */
 77 | 
 78 | 		#intro {
 79 | 			margin-bottom: 320px;
 80 | 		}
 81 | 
 82 | 		#outro {
 83 | 			height: 640px;
 84 | 		}
 85 | 
 86 | 		/* scrollama */
 87 | 
 88 | 		#scroll {
 89 | 			position: relative;
 90 | 		}
 91 | 
 92 | 		.scroll__text {
 93 | 			position: relative;
 94 | 			padding: 0 1rem;
 95 | 			margin: 0 auto;
 96 | 			width: 33%;
 97 | 		}
 98 | 
 99 | 		.step {
100 | 			margin: 2rem auto 4rem auto;
101 | 			border: 1px solid #333;
102 | 		}
103 | 
104 | 		.step.is-active {
105 | 			background-color: lightgoldenrodyellow;
106 | 		}
107 | 
108 | 		.step p {
109 | 			text-align: center;
110 | 			padding: 1rem;
111 | 			font-size: 1.5rem;
112 | 		}
113 | 	</style>
114 | </head>
115 | 
116 | <body>
117 | 	<section id="intro">
118 | 		<p class="intro__overline">
119 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
120 | 		</p>
121 | 		<h1 class="intro__hed">Demo: Enable & Disable Events</h1>
122 | 		<p class="intro__dek">
123 | 			Start scrolling to see how it works. Click below to enable or disable
124 | 			the scroller.
125 | 		</p>
126 | 		<button id="eventsToggle">Click to Disable Events</button>
127 | 	</section>
128 | 	<section id="scroll">
129 | 		<div class="scroll__text">
130 | 			<div class="step" data-step="1">
131 | 				<p>STEP 1</p>
132 | 			</div>
133 | 			<div class="step" data-step="2">
134 | 				<p>STEP 2</p>
135 | 			</div>
136 | 		</div>
137 | 	</section>
138 | 	<section id="outro"></section>
139 | 	<script src="https://unpkg.com/intersection-observer"></script>
140 | 	<script src="../build/scrollama.js"></script>
141 | 	<script src="d3.v4.min.js"></script>
142 | 	<script>
143 | 		var container = document.querySelector("#scroll");
144 | 		var text = container.querySelector(".scroll__text");
145 | 		var steps = text.querySelectorAll(".step");
146 | 		var enableDisableButton = document.querySelector("#eventsToggle");
147 | 		var isEnabled = true;
148 | 
149 | 		// initialize the scrollama
150 | 		var scroller = scrollama();
151 | 
152 | 		// scrollama event handlers
153 | 		function handleStepEnter(response) {
154 | 			// response = { element, direction, index }
155 | 			console.log("enter", response);
156 | 			// add to color to current step
157 | 			response.element.classList.add("is-active");
158 | 		}
159 | 
160 | 		function handleStepExit(response) {
161 | 			// response = { element, direction, index }
162 | 			console.log("exit", response);
163 | 			// remove color from current step
164 | 			response.element.classList.remove("is-active");
165 | 		}
166 | 
167 | 		function handleStepProgress(response) {
168 | 			console.log(response.progress);
169 | 			d3.select(response.element)
170 | 				.select("p")
171 | 				.text(d3.format(".1%")(response.progress));
172 | 		}
173 | 
174 | 		function handleEnableStateChange() {
175 | 			if (isEnabled) {
176 | 				scroller.disable();
177 | 				enableDisableButton.innerHTML = "Click to Enable Events";
178 | 			} else {
179 | 				scroller.enable();
180 | 				enableDisableButton.innerHTML = "Click to Disable Events";
181 | 			}
182 | 			isEnabled = !isEnabled;
183 | 		}
184 | 
185 | 		function init() {
186 | 			// set random padding for different step heights (not required)
187 | 			steps.forEach(function (step) {
188 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
189 | 				step.style.padding = v + "px 0px";
190 | 			});
191 | 
192 | 			// 1. setup the scroller with the bare-bones options
193 | 			// this will also initialize trigger observations
194 | 			// 3. bind scrollama event handlers (this can be chained like below)
195 | 			scroller
196 | 				.setup({
197 | 					step: ".scroll__text .step",
198 | 					debug: true,
199 | 					progress: true
200 | 				})
201 | 				.onStepEnter(handleStepEnter)
202 | 				.onStepExit(handleStepExit)
203 | 				.onStepProgress(handleStepProgress);
204 | 
205 | 			// setup resize event
206 | 			window.addEventListener("resize", scroller.resize);
207 | 
208 | 			// handle enable/disable button clicks
209 | 			enableDisableButton.addEventListener("click", handleEnableStateChange);
210 | 		}
211 | 
212 | 		// kick things off
213 | 		init();
214 | 	</script>
215 | </body>
216 | 
217 | </html>


--------------------------------------------------------------------------------
/dev/fixed-js.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama Demo: Fixed JS</title>
  8 | 	<meta name="description" content="Scrollama Demo: Fixed JS" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<style>
 11 | 		/* default / demo page */
 12 | 
 13 | 		* {
 14 | 			box-sizing: border-box;
 15 | 		}
 16 | 
 17 | 		html,
 18 | 		body {
 19 | 			margin: 0;
 20 | 			padding: 0;
 21 | 			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 22 | 				Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 23 | 		}
 24 | 
 25 | 		body {
 26 | 			min-height: 1280px;
 27 | 			font-weight: 300;
 28 | 			color: #2a2a2a;
 29 | 		}
 30 | 
 31 | 		p,
 32 | 		h1,
 33 | 		h2,
 34 | 		h3,
 35 | 		h4,
 36 | 		a {
 37 | 			margin: 0;
 38 | 			font-weight: 300;
 39 | 		}
 40 | 
 41 | 		a,
 42 | 		a:visited,
 43 | 		a:hover {
 44 | 			color: #f30;
 45 | 			text-decoration: none;
 46 | 			border-bottom: 1px solid currentColor;
 47 | 		}
 48 | 
 49 | 		#intro {
 50 | 			max-width: 40rem;
 51 | 			margin: 1rem auto;
 52 | 			text-align: center;
 53 | 		}
 54 | 
 55 | 		.intro__overline {
 56 | 			font-size: 1.4rem;
 57 | 		}
 58 | 
 59 | 		.intro__hed {
 60 | 			font-size: 1.4rem;
 61 | 			margin: 1.5rem auto;
 62 | 			text-transform: uppercase;
 63 | 			font-weight: 900;
 64 | 			letter-spacing: 0.05em;
 65 | 		}
 66 | 
 67 | 		.intro__dek {
 68 | 			font-size: 1.4rem;
 69 | 		}
 70 | 
 71 | 		/* demo */
 72 | 
 73 | 		#intro {
 74 | 			margin-bottom: 320px;
 75 | 		}
 76 | 
 77 | 		#outro {
 78 | 			height: 1200px;
 79 | 		}
 80 | 
 81 | 		/* scrollama */
 82 | 
 83 | 		#scroll {
 84 | 			position: relative;
 85 | 			border-top: 2px dashed #000;
 86 | 			border-bottom: 2px dashed #000;
 87 | 			display: -webkit-box;
 88 | 			display: -ms-flexbox;
 89 | 			display: flex;
 90 | 		}
 91 | 
 92 | 		figure {
 93 | 			position: sticky;
 94 | 			width: 100%;
 95 | 			top: 0;
 96 | 			right: 2rem;
 97 | 			-webkit-transform: translate3d(0, 0, 0);
 98 | 			-moz-transform: translate3d(0, 0, 0);
 99 | 			transform: translate3d(0, 0, 0);
100 | 			background-color: #ddd;
101 | 			border: 1px solid #000;
102 | 		}
103 | 
104 | 		article p {
105 | 			text-align: center;
106 | 			padding: 1rem;
107 | 			position: absolute;
108 | 			top: 50%;
109 | 			left: 50%;
110 | 			-moz-transform: translate(-50%, -50%);
111 | 			-webkit-transform: translate(-50%, -50%);
112 | 			transform: translate(-50%, -50%);
113 | 			font-size: 8rem;
114 | 			font-weight: 900;
115 | 			color: #666;
116 | 		}
117 | 
118 | 		article {
119 | 			position: relative;
120 | 			padding: 0 1rem;
121 | 			width: 30rem;
122 | 		}
123 | 
124 | 		.step {
125 | 			margin: 0 auto 2rem auto;
126 | 			border: 1px solid #333;
127 | 			position: relative;
128 | 			/* border-bottom: none; */
129 | 		}
130 | 
131 | 		.step:last-child {
132 | 			border-bottom: 1px solid #333;
133 | 		}
134 | 
135 | 		.step.is-active {
136 | 			background-color: lightgoldenrodyellow;
137 | 		}
138 | 
139 | 		.step p {
140 | 			text-align: center;
141 | 			padding: 1rem;
142 | 			font-size: 1.5rem;
143 | 		}
144 | 	</style>
145 | </head>
146 | 
147 | <body>
148 | 	<section id="intro">
149 | 		<p class="intro__overline">
150 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
151 | 		</p>
152 | 		<h1 class="intro__hed">Demo: Sticky Graphic Position</h1>
153 | 		<p class="intro__dek">
154 | 			Start scrolling to see how it works.
155 | 		</p>
156 | 	</section>
157 | 	<section id="scroll">
158 | 		<article>
159 | 			<div class="step" data-step="1">
160 | 				<p>STEP 1</p>
161 | 			</div>
162 | 			<div class="step" data-step="2">
163 | 				<p>STEP 2</p>
164 | 			</div>
165 | 			<div class="step" data-step="3">
166 | 				<p>STEP 3</p>
167 | 			</div>
168 | 			<div class="step" data-step="4">
169 | 				<p>STEP 4</p>
170 | 			</div>
171 | 		</article>
172 | 		<figure>
173 | 			<p>0</p>
174 | 		</figure>
175 | 	</section>
176 | 	<section id="outro"></section>
177 | 	<script src="d3.v4.min.js"></script>
178 | 	<script src="https://unpkg.com/intersection-observer"></script>
179 | 	<script src="../build/scrollama.js"></script>
180 | 	<script>
181 | 		// using d3 for convenience
182 | 		var container = d3.select("#scroll");
183 | 		var figure = container.select("figure");
184 | 		var article = container.select("article");
185 | 		var step = article.selectAll(".step");
186 | 
187 | 		// initialize the scrollama
188 | 		var scroller = scrollama();
189 | 
190 | 		// generic window resize listener event
191 | 		function handleResize() {
192 | 			// 1. update height of step elements
193 | 			var stepHeight = Math.floor(window.innerHeight * 0.75);
194 | 			step.style("height", stepHeight + "px");
195 | 
196 | 			// 2. update width/height of graphic element
197 | 			var bodyWidth = d3.select("body").node().offsetWidth;
198 | 
199 | 			var figureHeight = Math.floor(window.innerHeight * 0.5);
200 | 			figure.style("height", figureHeight + "px");
201 | 			// 3. tell scrollama to update new element dimensions
202 | 			scroller.resize();
203 | 		}
204 | 
205 | 		// scrollama event handlers
206 | 		function handleStepEnter(response) {
207 | 			console.log(response);
208 | 			// response = { element, direction, index }
209 | 
210 | 			// add color to current step only
211 | 			step.classed("is-active", function (d, i) {
212 | 				return i === response.index;
213 | 			});
214 | 
215 | 			// update graphic based on step
216 | 			figure.select("p").text(response.index + 1);
217 | 		}
218 | 
219 | 		function init() {
220 | 			// 1. force a resize on load to ensure proper dimensions are sent to scrollama
221 | 			handleResize();
222 | 
223 | 			// 2. setup the scroller passing options
224 | 			// this will also initialize trigger observations
225 | 			// 3. bind scrollama event handlers (this can be chained like below)
226 | 			scroller
227 | 				.setup({
228 | 					step: "article .step",
229 | 					debug: true,
230 | 					offset: 0.75
231 | 				})
232 | 				.onStepEnter(handleStepEnter);
233 | 
234 | 			// setup resize event
235 | 			window.addEventListener("resize", handleResize);
236 | 		}
237 | 
238 | 		// kick things off
239 | 		init();
240 | 	</script>
241 | </body>
242 | 
243 | </html>


--------------------------------------------------------------------------------
/dev/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Basic Example</title>
  8 | 	<meta name="description" content="Scrollama: Basic Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../docs/style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 		}
 15 | 
 16 | 		article {
 17 | 			position: relative;
 18 | 			padding: 0 1rem;
 19 | 			margin: 0 auto;
 20 | 			width: 33%;
 21 | 		}
 22 | 
 23 | 		.step {
 24 | 			margin: 2rem auto 4rem auto;
 25 | 			background-color: #3b3b3b;
 26 | 			color: #fff;
 27 | 		}
 28 | 
 29 | 		.step.is-active {
 30 | 			background-color: goldenrod;
 31 | 			color: #3b3b3b;
 32 | 		}
 33 | 
 34 | 		.step p {
 35 | 			text-align: center;
 36 | 			padding: 1rem;
 37 | 			font-size: 1.5rem;
 38 | 		}
 39 | 	</style>
 40 | </head>
 41 | 
 42 | <body>
 43 | 	<main>
 44 | 		<section id="intro">
 45 | 			<h1 class="intro__hed">Basic Example</h1>
 46 | 			<p class="intro__dek">
 47 | 				Start scrolling to see how it works.
 48 | 			</p>
 49 | 		</section>
 50 | 		<section id="scrolly">
 51 | 			<article>
 52 | 				<div class="step" data-step="1">
 53 | 					<p>STEP 1</p>
 54 | 				</div>
 55 | 				<div class="step" data-step="2">
 56 | 					<p>STEP 2</p>
 57 | 				</div>
 58 | 				<div class="step" data-step="3">
 59 | 					<p>STEP 3</p>
 60 | 				</div>
 61 | 				<div class="step" data-step="4">
 62 | 					<p>STEP 4</p>
 63 | 				</div>
 64 | 			</article>
 65 | 		</section>
 66 | 		<section id="outro"></section>
 67 | 	</main>
 68 | 
 69 | 	<script src="../build/scrollama.js"></script>
 70 | 	<script>
 71 | 		var scrolly = document.querySelector("#scrolly");
 72 | 		var article = scrolly.querySelector("article");
 73 | 		var step = article.querySelectorAll(".step");
 74 | 
 75 | 		// initialize the scrollama
 76 | 		var scroller = scrollama();
 77 | 
 78 | 		// scrollama event handlers
 79 | 		function handleStepEnter(response) {
 80 | 			// response = { element, direction, index }
 81 | 			console.log(response);
 82 | 			// add to color to current step
 83 | 			response.element.classList.add("is-active");
 84 | 		}
 85 | 
 86 | 		function handleStepExit(response) {
 87 | 			// response = { element, direction, index }
 88 | 			console.log(response);
 89 | 			// remove color from current step
 90 | 			response.element.classList.remove("is-active");
 91 | 		}
 92 | 
 93 | 		function init() {
 94 | 			// set random padding for different step heights (not required)
 95 | 			step.forEach(function (step) {
 96 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
 97 | 				step.style.padding = v + "px 0px";
 98 | 			});
 99 | 
100 | 			// 1. setup the scroller with the bare-bones options
101 | 			// 		this will also initialize trigger observations
102 | 			// 2. bind scrollama event handlers (this can be chained like below)
103 | 			scroller
104 | 				.setup({
105 | 					step: "#scrolly article .step",
106 | 					debug: false,
107 | 					offset: 0.5
108 | 				})
109 | 				.onStepEnter(handleStepEnter)
110 | 				.onStepExit(handleStepExit);
111 | 
112 | 		}
113 | 
114 | 		// kick things off
115 | 		init();
116 | 	</script>
117 | </body>
118 | 
119 | </html>


--------------------------------------------------------------------------------
/dev/multiple.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5 | <!--[if gt IE 8]><!-->
  6 | <html class="no-js">
  7 |   <!--<![endif]-->
  8 | 
  9 |   <head>
 10 |     <meta charset="utf-8" />
 11 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 12 |     <title>Scrollama demo</title>
 13 |     <meta name="description" content="" />
 14 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 15 |     <style>
 16 |       * {
 17 |         box-sizing: border-box;
 18 |       }
 19 | 
 20 |       html,
 21 |       body {
 22 |         margin: 0;
 23 |         padding: 0;
 24 |       }
 25 | 
 26 |       body {
 27 |         min-height: 101vh;
 28 |       }
 29 | 
 30 |       p {
 31 |         margin: 0;
 32 |       }
 33 | 
 34 |       #scroll {
 35 |         background-color: #cdcdcd;
 36 |         position: relative;
 37 |         margin-top: 105vh;
 38 |         margin-bottom: 200vh;
 39 |       }
 40 | 
 41 |       #scroll2 {
 42 |         background-color: #cdcdcd;
 43 |         position: relative;
 44 |         margin-top: 50vh;
 45 |         margin-bottom: 200vh;
 46 |       }
 47 | 
 48 |       .scroll__graphic {
 49 |         position: absolute;
 50 |         top: 0;
 51 |         left: 0;
 52 |         bottom: auto;
 53 |         background-color: #ccc;
 54 |         -moz-transition: background-color 250ms ease-in-out;
 55 |         -webkit-transition: background-color 250ms ease-in-out;
 56 |         transition: background-color 250ms ease-in-out;
 57 |         -webkit-transform: translate3d(0, 0, 0);
 58 |         -moz-transform: translate3d(0, 0, 0);
 59 |         transform: translate3d(0, 0, 0);
 60 |       }
 61 | 
 62 |       .scroll__graphic.is-fixed {
 63 |         position: fixed;
 64 |       }
 65 | 
 66 |       .scroll__graphic.is-bottom {
 67 |         bottom: 0;
 68 |         top: auto;
 69 |       }
 70 | 
 71 |       .scroll__text {
 72 |         padding: 1rem;
 73 |         position: relative;
 74 |       }
 75 | 
 76 |       .step {
 77 |         max-width: 30rem;
 78 |         margin: 3rem auto;
 79 |         border: 2px solid #333;
 80 |         background-color: #fff;
 81 |       }
 82 | 
 83 |       .step.is-active {
 84 |         background-color: lightgoldenrodyellow;
 85 |       }
 86 | 
 87 |       .step p {
 88 |         text-align: center;
 89 |         padding: 1rem;
 90 |       }
 91 |     </style>
 92 |   </head>
 93 | 
 94 |   <body>
 95 |     <section id="scroll">
 96 |       <div class="scroll__text">
 97 |         <div class="step" data-step="#ccc">
 98 |           <p>Step 1</p>
 99 |         </div>
100 |         <!-- <div class='step' data-step='#aaa'>
101 | 				<p>Step 2</p>
102 | 			</div> -->
103 |         <!-- <div class='step' data-step='#888'>
104 | 				<p>Step 3</p>
105 | 			</div>
106 | 			<div class='step' data-step='#666'>
107 | 				<p>Step 4</p>
108 | 			</div> -->
109 |       </div>
110 |     </section>
111 |     <section id="scroll2">
112 |       <div class="scroll__text">
113 |         <div class="step" data-step="#ccc">
114 |           <p>Step 1</p>
115 |         </div>
116 |         <!-- <div class='step' data-step='#aaa'>
117 | 				<p>Step 2</p>
118 | 			</div> -->
119 |         <!-- <div class='step' data-step='#888'>
120 | 				<p>Step 3</p>
121 | 			</div>
122 | 			<div class='step' data-step='#666'>
123 | 				<p>Step 4</p>
124 | 			</div> -->
125 |       </div>
126 |     </section>
127 |     <div class="debug"></div>
128 |     <script src="d3.v4.min.js"></script>
129 |     <script src="https://unpkg.com/intersection-observer"></script>
130 |     <script src="scrollama.js"></script>
131 |     <script>
132 |       var container = d3.select("#scroll");
133 |       var text = container.select(".scroll__text");
134 |       var step = text.selectAll(".step");
135 | 
136 |       var container2 = d3.select("#scroll2");
137 |       var text2 = container2.select(".scroll__text");
138 |       var step2 = text2.selectAll(".step");
139 | 
140 |       var scroller = scrollama();
141 |       var scroller2 = scrollama();
142 | 
143 |       function handleResize() {
144 |         // var h = Math.floor(window.innerHeight * 0.75) + 'px'
145 |         step.each(function() {
146 |           var ran = 0.1 + Math.random();
147 |           var h = Math.floor(window.innerHeight * ran) + "px";
148 |           d3.select(this).style("height", h);
149 |         });
150 | 
151 |         scroller.resize();
152 |       }
153 | 
154 |       function handleStepEnter(resp) {
155 |         console.log("enter", resp);
156 |         step.classed("is-active", function(d, i) {
157 |           return i === resp.index;
158 |         });
159 |         var val = d3.select(resp.element).attr("data-step");
160 |       }
161 | 
162 |       function handleStepExit(resp) {
163 |         console.log("exit", resp);
164 |         d3.select(resp.element).classed("is-active", false);
165 |       }
166 | 
167 |       function handleProgress(resp) {
168 |         console.log("progress", resp);
169 |       }
170 | 
171 |       function handleResize2() {
172 |         // var h = Math.floor(window.innerHeight * 0.75) + 'px'
173 |         step2.each(function() {
174 |           var ran = 0.1 + Math.random();
175 |           var h = Math.floor(window.innerHeight * ran) + "px";
176 |           d3.select(this).style("height", h);
177 |         });
178 | 
179 |         scroller2.resize();
180 |       }
181 | 
182 |       function handleStepEnter2(resp) {
183 |         console.log("enter", resp);
184 |         step2.classed("is-active", function(d, i) {
185 |           return i === resp.index;
186 |         });
187 |         var val = d3.select(resp.element).attr("data-step");
188 |       }
189 | 
190 |       function handleStepExit2(resp) {
191 |         console.log("exit", resp);
192 |         d3.select(resp.element).classed("is-active", false);
193 |       }
194 | 
195 |       function handleProgress2(resp) {
196 |         console.log("progress", resp);
197 |       }
198 | 
199 |       function init() {
200 |         handleResize();
201 |         handleResize2();
202 | 
203 |         scroller
204 |           .setup({
205 |             step: "#scroll .step",
206 |             offset: 0.33,
207 |             debug: true,
208 |             progress: true
209 |           })
210 |           .onStepEnter(handleStepEnter)
211 |           .onStepExit(handleStepExit)
212 |           .onStepProgress(handleProgress);
213 | 
214 |         scroller2
215 |           .setup({
216 |             step: "#scroll2 .step",
217 |             offset: 0.67,
218 |             debug: true,
219 |             progress: true
220 |           })
221 |           .onStepEnter(handleStepEnter2)
222 |           .onStepExit(handleStepExit2)
223 |           .onStepProgress(handleProgress2);
224 | 
225 |         console.log(scroller.getOffset());
226 |         console.log(scroller2.getOffset());
227 |         // window.addEventListener('resize', handleResize)
228 |       }
229 | 
230 |       init();
231 |     </script>
232 |   </body>
233 | </html>
234 | 


--------------------------------------------------------------------------------
/dev/overflow-scroll-error.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama Demo: Basic</title>
  8 | 	<meta name="description" content="Scrollama Demo: Error when steps are children of multiple scrollable elements" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<style>
 11 | 		/* default / demo page */
 12 | 		* {
 13 | 			box-sizing: border-box;
 14 | 		}
 15 | 
 16 | 		html,
 17 | 		body {
 18 | 			margin: 0;
 19 | 			padding: 0;
 20 | 			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 21 | 				Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 22 | 		}
 23 | 
 24 | 		body {
 25 | 			font-weight: 300;
 26 | 			color: #2a2a2a;
 27 | 			height: 100vh;
 28 | 		}
 29 | 
 30 | 		main {
 31 | 			/* NO OVERFLOW HERE */
 32 | 		}
 33 | 
 34 | 		p,
 35 | 		h1,
 36 | 		h2,
 37 | 		h3,
 38 | 		h4,
 39 | 		a {
 40 | 			margin: 0;
 41 | 			font-weight: 300;
 42 | 		}
 43 | 
 44 | 		a,
 45 | 		a:visited,
 46 | 		a:hover {
 47 | 			color: #f30;
 48 | 			text-decoration: none;
 49 | 			border-bottom: 1px solid currentColor;
 50 | 		}
 51 | 
 52 | 		#intro {
 53 | 			max-width: 40rem;
 54 | 			margin: 1rem auto;
 55 | 			text-align: center;
 56 | 		}
 57 | 
 58 | 		.intro__overline {
 59 | 			font-size: 1.4rem;
 60 | 		}
 61 | 
 62 | 		.intro__hed {
 63 | 			font-size: 1.4rem;
 64 | 			margin: 1.5rem auto;
 65 | 			text-transform: uppercase;
 66 | 			font-weight: 900;
 67 | 			letter-spacing: 0.05em;
 68 | 		}
 69 | 
 70 | 		.intro__dek {
 71 | 			font-size: 1.4rem;
 72 | 			margin-bottom: 1rem;
 73 | 		}
 74 | 
 75 | 		/* demo */
 76 | 		#bottom-spacer {
 77 | 			height: 100vh;
 78 | 		}
 79 | 
 80 | 		/* scrollama */
 81 | 		#step-container-element {
 82 | 			position: relative;
 83 | 			height: 500px;
 84 | 			width: 50vw;
 85 | 			overflow-y: scroll;
 86 | 		}
 87 | 
 88 | 		.scroll__text {
 89 | 			position: relative;
 90 | 			padding: 0 1rem;
 91 | 			margin: 0 auto;
 92 | 			width: 33%;
 93 | 		}
 94 | 
 95 | 		.step {
 96 | 			margin: 2rem auto 4rem auto;
 97 | 			border: 1px solid #333;
 98 | 			background-color: #fff;
 99 | 		}
100 | 
101 | 		.step.is-active {
102 | 			background-color: lightgoldenrodyellow;
103 | 		}
104 | 
105 | 		.step p {
106 | 			text-align: center;
107 | 			padding: 1rem;
108 | 			font-size: 1.5rem;
109 | 		}
110 | 
111 | 		.section_title {
112 | 			position: sticky;
113 | 			top: 0;
114 | 		}
115 | 
116 | 		nav {
117 | 			position: fixed;
118 | 			top: 0;
119 | 			left: 0;
120 | 			z-index: 1000;
121 | 			background: white;
122 | 			padding: 1rem;
123 | 		}
124 | 	</style>
125 | </head>
126 | 
127 | <body>
128 | 	<main>
129 | 		<section id="intro">
130 | 			<p class="intro__overline">
131 | 				<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
132 | 			</p>
133 | 			<h1 class="intro__hed">
134 | 				Scrollama throws an error when steps are children of a scrollable
135 | 				element
136 | 			</h1>
137 | 			<p class="intro__dek">
138 | 				Calculating the scroll direction is problematic when steps are
139 | 				children of a scrollable element that isn't the page scroll. This page
140 | 				provides an example of what not to do:
141 | 				<strong>do NOT place steps inside a scrollable element</strong> with
142 | 				<em>overflowY: scroll</em> or <em>overflowY: auto</em> and fixed
143 | 				height.
144 | 			</p>
145 | 			<p class="intro__dek">To demonstrate the incorrect behavior:</p>
146 | 			<ul class="intro__dek">
147 | 				<li>
148 | 					ensure that the olive-colored element intersects the trigger (the
149 | 					dotted line)
150 | 				</li>
151 | 				<li>move the mouse pointer inside the olive-colored element</li>
152 | 				<li>
153 | 					scroll up and down with the mouse pointer inside the colored
154 | 					container. You may have to scroll up and down several times before
155 | 					the direction calculation becomes incorrect
156 | 				</li>
157 | 			</ul>
158 | 			<p class="intro__dek">
159 | 				<strong>Notice that step events are not triggered correctly when the inner
160 | 					container scrolls without the window element scrolling.</strong>
161 | 			</p>
162 | 		</section>
163 | 	</main>
164 | 
165 | 	<script src="./d3.v4.min.js"></script>
166 | 	<script src="https://unpkg.com/intersection-observer"></script>
167 | 	<script src="../build/scrollama.js"></script>
168 | 	<script>
169 | 		function buildSection(
170 | 			title,
171 | 			parentSelector,
172 | 			sectionId,
173 | 			nSteps,
174 | 			stepHeight,
175 | 			background
176 | 		) {
177 | 			var scroll = d3
178 | 				.select(parentSelector)
179 | 				.append("section")
180 | 				.append("div")
181 | 				.classed("scroll__text", true)
182 | 				.attr("id", sectionId)
183 | 				.style("background", background);
184 | 			scroll
185 | 				.append("div")
186 | 				.append("h2")
187 | 				.classed("section_title", true)
188 | 				.html(title);
189 | 			var data = d3.range(nSteps);
190 | 			scroll
191 | 				.selectAll("div.step")
192 | 				.data(data)
193 | 				.enter()
194 | 				.append("div")
195 | 				.classed("step", true)
196 | 				.attr("data-step", function (datum) {
197 | 					return datum.toString();
198 | 				})
199 | 				.style("height", stepHeight + "px")
200 | 				.append("p")
201 | 				.html(function (datum) {
202 | 					return "STEP " + datum;
203 | 				});
204 | 			return scroll.node();
205 | 		}
206 | 		function buildScroller(sectionId) {
207 | 			var scroller = scrollama()
208 | 				.setup({
209 | 					step: "#" + sectionId + " .step",
210 | 					debug: true,
211 | 					offset: 0.9,
212 | 					progress: true
213 | 				})
214 | 				.onStepEnter(function handleStepEnter(response) {
215 | 					console.log(response.index, "-------- enter");
216 | 					response.element.classList.add("is-active");
217 | 				})
218 | 				.onStepExit(function handleStepExit(response) {
219 | 					console.log(response.index, "-------- exit");
220 | 					response.element.classList.remove("is-active");
221 | 				})
222 | 				.onStepProgress(function handleStepProgress(response) {
223 | 					console.log(
224 | 						response.index,
225 | 						"-------- progress -",
226 | 						response.progress
227 | 					);
228 | 				});
229 | 			// setup resize event
230 | 			window.addEventListener("resize", scroller.resize);
231 | 		}
232 | 		function init() {
233 | 			var scrollableStepContainerId = "step-container-element";
234 | 			buildSection(
235 | 				"I'm a scrollable element containing steps",
236 | 				"main",
237 | 				scrollableStepContainerId,
238 | 				5,
239 | 				150,
240 | 				"olive"
241 | 			);
242 | 			buildScroller(scrollableStepContainerId);
243 | 			d3.select("main")
244 | 				.append("div")
245 | 				.attr("id", "bottom-spacer");
246 | 		}
247 | 		// kick things off
248 | 		init();
249 | 	</script>
250 | </body>
251 | 
252 | </html>


--------------------------------------------------------------------------------
/dev/progress.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama Demo: Basic</title>
  8 | 	<meta name="description" content="Scrollama Demo: Basic" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<style>
 11 | 		/* default / demo page */
 12 | 
 13 | 		* {
 14 | 			box-sizing: border-box;
 15 | 		}
 16 | 
 17 | 		html,
 18 | 		body {
 19 | 			margin: 0;
 20 | 			padding: 0;
 21 | 			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 22 | 				Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 23 | 		}
 24 | 
 25 | 		body {
 26 | 			min-height: 1280px;
 27 | 			font-weight: 300;
 28 | 			color: #2a2a2a;
 29 | 		}
 30 | 
 31 | 		p,
 32 | 		h1,
 33 | 		h2,
 34 | 		h3,
 35 | 		h4,
 36 | 		a {
 37 | 			margin: 0;
 38 | 			font-weight: 300;
 39 | 		}
 40 | 
 41 | 		a,
 42 | 		a:visited,
 43 | 		a:hover {
 44 | 			color: #f30;
 45 | 			text-decoration: none;
 46 | 			border-bottom: 1px solid currentColor;
 47 | 		}
 48 | 
 49 | 		#intro {
 50 | 			max-width: 40rem;
 51 | 			margin: 1rem auto;
 52 | 			text-align: center;
 53 | 		}
 54 | 
 55 | 		.intro__overline {
 56 | 			font-size: 1.4rem;
 57 | 		}
 58 | 
 59 | 		.intro__hed {
 60 | 			font-size: 1.4rem;
 61 | 			margin: 1.5rem auto;
 62 | 			text-transform: uppercase;
 63 | 			font-weight: 900;
 64 | 			letter-spacing: 0.05em;
 65 | 		}
 66 | 
 67 | 		.intro__dek {
 68 | 			font-size: 1.4rem;
 69 | 		}
 70 | 
 71 | 		/* demo */
 72 | 
 73 | 		#intro {
 74 | 			margin-bottom: 320px;
 75 | 		}
 76 | 
 77 | 		#outro {
 78 | 			height: 640px;
 79 | 		}
 80 | 
 81 | 		/* scrollama */
 82 | 
 83 | 		#scroll {
 84 | 			position: relative;
 85 | 		}
 86 | 
 87 | 		.scroll__text {
 88 | 			position: relative;
 89 | 			padding: 0 1rem;
 90 | 			margin: 0 auto;
 91 | 			width: 33%;
 92 | 		}
 93 | 
 94 | 		.step {
 95 | 			margin: 2rem auto 4rem auto;
 96 | 			border: 1px solid #333;
 97 | 		}
 98 | 
 99 | 		.step.is-active {
100 | 			background-color: lightgoldenrodyellow;
101 | 		}
102 | 
103 | 		.step p {
104 | 			text-align: center;
105 | 			padding: 1rem;
106 | 			font-size: 1.5rem;
107 | 		}
108 | 	</style>
109 | </head>
110 | 
111 | <body>
112 | 	<section id="intro">
113 | 		<p class="intro__overline">
114 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
115 | 		</p>
116 | 		<h1 class="intro__hed">Demo: Basic</h1>
117 | 		<p class="intro__dek">
118 | 			Start scrolling to see how it works.
119 | 		</p>
120 | 	</section>
121 | 	<section id="scroll">
122 | 		<div class="scroll__text">
123 | 			<div class="step" data-step="1">
124 | 				<p>STEP 1</p>
125 | 			</div>
126 | 			<div class="step" data-step="2">
127 | 				<p>STEP 2</p>
128 | 			</div>
129 | 		</div>
130 | 	</section>
131 | 	<section id="outro"></section>
132 | 	<script src="../build/scrollama.js"></script>
133 | 	<script src="d3.v4.min.js"></script>
134 | 	<script>
135 | 		var container = document.querySelector("#scroll");
136 | 		var text = container.querySelector(".scroll__text");
137 | 		var steps = text.querySelectorAll(".step");
138 | 
139 | 		// initialize the scrollama
140 | 		var scroller = scrollama();
141 | 
142 | 		// scrollama event handlers
143 | 		function handleStepEnter(response) {
144 | 			// response = { element, direction, index }
145 | 			console.log("enter", response);
146 | 			// add to color to current step
147 | 			response.element.classList.add("is-active");
148 | 		}
149 | 
150 | 		function handleStepExit(response) {
151 | 			// response = { element, direction, index }
152 | 			console.log("exit", response);
153 | 			// remove color from current step
154 | 			response.element.classList.remove("is-active");
155 | 		}
156 | 
157 | 		function handleStepProgress(response) {
158 | 			console.log(response.progress);
159 | 			d3.select(response.element)
160 | 				.select("p")
161 | 				.text(d3.format(".1%")(response.progress));
162 | 		}
163 | 
164 | 		function init() {
165 | 			// set random padding for different step heights (not required)
166 | 			steps.forEach(function (step) {
167 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
168 | 				step.style.padding = v + "px 0px";
169 | 			});
170 | 
171 | 			// 1. setup the scroller with the bare-bones options
172 | 			// this will also initialize trigger observations
173 | 			// 3. bind scrollama event handlers (this can be chained like below)
174 | 			scroller
175 | 				.setup({
176 | 					step: ".scroll__text .step",
177 | 					debug: true,
178 | 					progress: true,
179 | 					offset: 0
180 | 				})
181 | 				.onStepEnter(handleStepEnter)
182 | 				.onStepExit(handleStepExit)
183 | 				.onStepProgress(handleStepProgress);
184 | 
185 | 			// setup resize event
186 | 			window.addEventListener("resize", scroller.resize);
187 | 		}
188 | 
189 | 		// kick things off
190 | 		init();
191 | 	</script>
192 | </body>
193 | 
194 | </html>


--------------------------------------------------------------------------------
/dev/scroll-parent.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Basic Example</title>
  8 | 	<meta name="description" content="Scrollama: Basic Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<style>
 11 | 		html,
 12 | 		body {
 13 | 			overflow: hidden;
 14 | 		}
 15 | 
 16 | 		.main-container {
 17 | 			position: absolute;
 18 | 			top: 0;
 19 | 			bottom: 0;
 20 | 			left: 0;
 21 | 			right: 0;
 22 | 			overflow: auto;
 23 | 		}
 24 | 
 25 | 		#scrolly {
 26 | 			position: relative;
 27 | 		}
 28 | 
 29 | 		article {
 30 | 			position: relative;
 31 | 			padding: 0 1rem;
 32 | 			margin: 0 auto;
 33 | 			width: 33%;
 34 | 		}
 35 | 
 36 | 		.step {
 37 | 			margin: 2rem auto 4rem auto;
 38 | 			background-color: #3b3b3b;
 39 | 			color: #fff;
 40 | 		}
 41 | 
 42 | 		.step.is-active {
 43 | 			background-color: goldenrod;
 44 | 			color: #3b3b3b;
 45 | 		}
 46 | 
 47 | 		.step p {
 48 | 			text-align: center;
 49 | 			padding: 1rem;
 50 | 			font-size: 1.5rem;
 51 | 		}
 52 | 	</style>
 53 | </head>
 54 | 
 55 | <body>
 56 | 
 57 | 	<div class="main-container">
 58 | 		<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
 59 | 			aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
 60 | 				style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 61 | 				<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 62 | 				<path
 63 | 					d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 64 | 					fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 65 | 				<path
 66 | 					d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 67 | 					fill="currentColor" class="octo-body"></path>
 68 | 			</svg></a>
 69 | 		<main>
 70 | 			<nav>
 71 | 				<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
 72 | 				<div class="nav__examples">
 73 | 					<p>Examples:</p>
 74 | 					<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
 75 | 					<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
 76 | 					<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
 77 | 					<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
 78 | 					<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
 79 | 				</div>
 80 | 			</nav>
 81 | 			<section id="intro">
 82 | 				<h1 class="intro__hed">Basic Example</h1>
 83 | 				<p class="intro__dek">
 84 | 					Start scrolling to see how it works.
 85 | 				</p>
 86 | 			</section>
 87 | 			<section id="scrolly">
 88 | 				<article>
 89 | 					<div class="step" data-step="1">
 90 | 						<p>STEP 1</p>
 91 | 					</div>
 92 | 					<div class="step" data-step="2">
 93 | 						<p>STEP 2</p>
 94 | 					</div>
 95 | 					<div class="step" data-step="3">
 96 | 						<p>STEP 3</p>
 97 | 					</div>
 98 | 					<div class="step" data-step="4">
 99 | 						<p>STEP 4</p>
100 | 					</div>
101 | 				</article>
102 | 			</section>
103 | 			<section id="outro"></section>
104 | 		</main>
105 | 	</div>
106 | 
107 | 	<script src="../build/scrollama.js"></script>
108 | 	<script>
109 | 		var scrolly = document.querySelector("#scrolly");
110 | 		var article = scrolly.querySelector("article");
111 | 		var step = article.querySelectorAll(".step");
112 | 
113 | 		// initialize the scrollama
114 | 		var scroller = scrollama();
115 | 
116 | 		// scrollama event handlers
117 | 		function handleStepEnter(response) {
118 | 			// response = { element, direction, index }
119 | 			console.log(response);
120 | 			// add to color to current step
121 | 			response.element.classList.add("is-active");
122 | 		}
123 | 
124 | 		function handleStepExit(response) {
125 | 			// response = { element, direction, index }
126 | 			console.log(response);
127 | 			// remove color from current step
128 | 			response.element.classList.remove("is-active");
129 | 		}
130 | 
131 | 		function init() {
132 | 			// set random padding for different step heights (not required)
133 | 			step.forEach(function (step) {
134 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
135 | 				step.style.padding = v + "px 0px";
136 | 			});
137 | 
138 | 			// 1. setup the scroller with the bare-bones options
139 | 			// 		this will also initialize trigger observations
140 | 			// 2. bind scrollama event handlers (this can be chained like below)
141 | 			scroller
142 | 				.setup({
143 | 					step: "#scrolly article .step",
144 | 					debug: false,
145 | 					offset: 0.5,
146 | 					container: document.querySelector('.main-container')
147 | 				})
148 | 				.onStepEnter(handleStepEnter)
149 | 				.onStepExit(handleStepExit);
150 | 
151 | 		}
152 | 
153 | 		// kick things off
154 | 		init();
155 | 	</script>
156 | </body>
157 | 
158 | </html>


--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/russellsamora/scrollama/33731a160f2df3f2bde33a22b366bc0281777dbb/docs/.nojekyll


--------------------------------------------------------------------------------
/docs/basic/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Basic Example</title>
  8 | 	<meta name="description" content="Scrollama: Basic Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 		}
 15 | 
 16 | 		article {
 17 | 			position: relative;
 18 | 			padding: 0 1rem;
 19 | 			margin: 0 auto;
 20 | 			width: 33%;
 21 | 		}
 22 | 
 23 | 		.step {
 24 | 			margin: 2rem auto 4rem auto;
 25 | 			background-color: #3b3b3b;
 26 | 			color: #fff;
 27 | 		}
 28 | 
 29 | 		.step.is-active {
 30 | 			background-color: goldenrod;
 31 | 			color: #3b3b3b;
 32 | 		}
 33 | 
 34 | 		.step p {
 35 | 			text-align: center;
 36 | 			padding: 1rem;
 37 | 			font-size: 1.5rem;
 38 | 		}
 39 | 	</style>
 40 | </head>
 41 | 
 42 | <body>
 43 | 	<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
 44 | 		aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
 45 | 			style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 46 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 47 | 			<path
 48 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 49 | 				fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 50 | 			<path
 51 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 52 | 				fill="currentColor" class="octo-body"></path>
 53 | 		</svg></a>
 54 | 	<main>
 55 | 		<nav>
 56 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
 57 | 			<div class="nav__examples">
 58 | 				<p>Examples:</p>
 59 | 				<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
 60 | 				<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
 61 | 				<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
 62 | 				<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
 63 | 				<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
 64 | 			</div>
 65 | 		</nav>
 66 | 		<section id="intro">
 67 | 			<h1 class="intro__hed">Basic Example</h1>
 68 | 			<p class="intro__dek">
 69 | 				Start scrolling to see how it works.
 70 | 			</p>
 71 | 		</section>
 72 | 		<section id="scrolly">
 73 | 			<article>
 74 | 				<div class="step" data-step="1">
 75 | 					<p>STEP 1</p>
 76 | 				</div>
 77 | 				<div class="step" data-step="2">
 78 | 					<p>STEP 2</p>
 79 | 				</div>
 80 | 				<div class="step" data-step="3">
 81 | 					<p>STEP 3</p>
 82 | 				</div>
 83 | 				<div class="step" data-step="4">
 84 | 					<p>STEP 4</p>
 85 | 				</div>
 86 | 			</article>
 87 | 		</section>
 88 | 		<section id="outro"></section>
 89 | 	</main>
 90 | 
 91 | 	<script src="../scrollama.min.js"></script>
 92 | 	<script>
 93 | 		var scrolly = document.querySelector("#scrolly");
 94 | 		var article = scrolly.querySelector("article");
 95 | 		var step = article.querySelectorAll(".step");
 96 | 
 97 | 		// initialize the scrollama
 98 | 		var scroller = scrollama();
 99 | 
100 | 		// scrollama event handlers
101 | 		function handleStepEnter(response) {
102 | 			// response = { element, direction, index }
103 | 			console.log(response);
104 | 			// add to color to current step
105 | 			response.element.classList.add("is-active");
106 | 		}
107 | 
108 | 		function handleStepExit(response) {
109 | 			// response = { element, direction, index }
110 | 			console.log(response);
111 | 			// remove color from current step
112 | 			response.element.classList.remove("is-active");
113 | 		}
114 | 
115 | 		function init() {
116 | 			// set random padding for different step heights (not required)
117 | 			step.forEach(function (step) {
118 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
119 | 				step.style.padding = v + "px 0px";
120 | 			});
121 | 
122 | 			// 1. setup the scroller with the bare-bones options
123 | 			// 		this will also initialize trigger observations
124 | 			// 2. bind scrollama event handlers (this can be chained like below)
125 | 			scroller
126 | 				.setup({
127 | 					step: "#scrolly article .step",
128 | 					debug: false,
129 | 					offset: 0.5
130 | 				})
131 | 				.onStepEnter(handleStepEnter)
132 | 				.onStepExit(handleStepExit);
133 | 
134 | 		}
135 | 
136 | 		// kick things off
137 | 		init();
138 | 	</script>
139 | </body>
140 | 
141 | </html>


--------------------------------------------------------------------------------
/docs/custom-offset/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Custom Offset Example</title>
  8 | 	<meta name="description" content="Scrollama: Custom Offset Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 		}
 15 | 
 16 | 		article {
 17 | 			position: relative;
 18 | 			padding: 0 1rem;
 19 | 			margin: 0 auto;
 20 | 			width: 33%;
 21 | 		}
 22 | 
 23 | 		.step {
 24 | 			margin: 2rem auto 4rem auto;
 25 | 			background-color: #3b3b3b;
 26 | 			color: #fff;
 27 | 		}
 28 | 
 29 | 		.step.is-active {
 30 | 			background-color: goldenrod;
 31 | 			color: #3b3b3b;
 32 | 		}
 33 | 
 34 | 		.step p {
 35 | 			text-align: center;
 36 | 			padding: 1rem;
 37 | 			font-size: 1.5rem;
 38 | 		}
 39 | 	</style>
 40 | </head>
 41 | 
 42 | <body>
 43 | 	<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
 44 | 		aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
 45 | 			style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 46 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 47 | 			<path
 48 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 49 | 				fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 50 | 			<path
 51 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 52 | 				fill="currentColor" class="octo-body"></path>
 53 | 		</svg></a>
 54 | 	<main>
 55 | 		<nav>
 56 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
 57 | 			<div class="nav__examples">
 58 | 				<p>Examples:</p>
 59 | 				<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
 60 | 				<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
 61 | 				<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
 62 | 				<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
 63 | 				<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
 64 | 			</div>
 65 | 		</nav>
 66 | 		<section id="intro">
 67 | 			<h1 class="intro__hed">Basic Example</h1>
 68 | 			<p class="intro__dek">
 69 | 				Start scrolling to see how it works.
 70 | 			</p>
 71 | 		</section>
 72 | 		<section id="scrolly">
 73 | 			<article>
 74 | 				<div class="step" data-step="1">
 75 | 					<p>STEP 1 - default (50%) offset</p>
 76 | 				</div>
 77 | 				<div class="step" data-step="2" data-offset="0.8">
 78 | 					<p>STEP 2 - 80% offset</p>
 79 | 				</div>
 80 | 				<div class="step" data-step="3" data-offset="0.2">
 81 | 					<p>STEP 3 - 20% offset</p>
 82 | 				</div>
 83 | 				<div class="step" data-step="4">
 84 | 					<p>STEP 1 - default (50%) offset</p>
 85 | 				</div>
 86 | 			</article>
 87 | 		</section>
 88 | 		<section id="outro"></section>
 89 | 	</main>
 90 | 
 91 | 	<script src="../scrollama.min.js"></script>
 92 | 	<script>
 93 | 		var scrolly = document.querySelector("#scrolly");
 94 | 		var article = scrolly.querySelector("article");
 95 | 		var step = article.querySelectorAll(".step");
 96 | 
 97 | 		// initialize the scrollama
 98 | 		var scroller = scrollama();
 99 | 
100 | 		// scrollama event handlers
101 | 		function handleStepEnter(response) {
102 | 			// response = { element, direction, index }
103 | 			console.log(response);
104 | 			// add to color to current step
105 | 			response.element.classList.add("is-active");
106 | 		}
107 | 
108 | 		function handleStepExit(response) {
109 | 			// response = { element, direction, index }
110 | 			console.log(response);
111 | 			// remove color from current step
112 | 			response.element.classList.remove("is-active");
113 | 		}
114 | 
115 | 		function init() {
116 | 			// set random padding for different step heights (not required)
117 | 			step.forEach(function (step) {
118 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
119 | 				step.style.padding = v + "px 0px";
120 | 			});
121 | 
122 | 			// 1. setup the scroller with the bare-bones options
123 | 			// 		this will also initialize trigger observations
124 | 			// 2. bind scrollama event handlers (this can be chained like below)
125 | 			scroller
126 | 				.setup({
127 | 					step: "#scrolly article .step",
128 | 					offset: 0.5
129 | 				})
130 | 				.onStepEnter(handleStepEnter)
131 | 				.onStepExit(handleStepExit);
132 | 
133 | 		}
134 | 
135 | 		// kick things off
136 | 		init();
137 | 	</script>
138 | </body>
139 | 
140 | </html>


--------------------------------------------------------------------------------
/docs/iframe/basic.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Basic Example</title>
  8 | 	<meta name="description" content="Scrollama: Basic Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 		}
 15 | 
 16 | 		article {
 17 | 			position: relative;
 18 | 			padding: 0 1rem;
 19 | 			margin: 0 auto;
 20 | 			width: 33%;
 21 | 		}
 22 | 
 23 | 		.step {
 24 | 			margin: 2rem auto 4rem auto;
 25 | 			background-color: #3b3b3b;
 26 | 			color: #fff;
 27 | 		}
 28 | 
 29 | 		.step.is-active {
 30 | 			background-color: goldenrod;
 31 | 			color: #3b3b3b;
 32 | 		}
 33 | 
 34 | 		.step p {
 35 | 			text-align: center;
 36 | 			padding: 1rem;
 37 | 			font-size: 1.5rem;
 38 | 		}
 39 | 	</style>
 40 | </head>
 41 | 
 42 | <body>
 43 | 	<main>
 44 | 		<section id="intro">
 45 | 			<h1 class="intro__hed">Basic Example</h1>
 46 | 			<p class="intro__dek">
 47 | 				Start scrolling to see how it works.
 48 | 			</p>
 49 | 		</section>
 50 | 		<section id="scrolly">
 51 | 			<article>
 52 | 				<div class="step" data-step="1">
 53 | 					<p>STEP 1</p>
 54 | 				</div>
 55 | 				<div class="step" data-step="2">
 56 | 					<p>STEP 2</p>
 57 | 				</div>
 58 | 				<div class="step" data-step="3">
 59 | 					<p>STEP 3</p>
 60 | 				</div>
 61 | 				<div class="step" data-step="4">
 62 | 					<p>STEP 4</p>
 63 | 				</div>
 64 | 			</article>
 65 | 		</section>
 66 | 		<section id="outro"></section>
 67 | 	</main>
 68 | 
 69 | 	<script src="../scrollama.min.js"></script>
 70 | 	<script>
 71 | 		var scrolly = document.querySelector("#scrolly");
 72 | 		var article = scrolly.querySelector("article");
 73 | 		var step = article.querySelectorAll(".step");
 74 | 
 75 | 		// initialize the scrollama
 76 | 		var scroller = scrollama();
 77 | 
 78 | 		// scrollama event handlers
 79 | 		function handleStepEnter(response) {
 80 | 			// response = { element, direction, index }
 81 | 			console.log(response);
 82 | 			// add to color to current step
 83 | 			response.element.classList.add("is-active");
 84 | 		}
 85 | 
 86 | 		function handleStepExit(response) {
 87 | 			// response = { element, direction, index }
 88 | 			console.log(response);
 89 | 			// remove color from current step
 90 | 			response.element.classList.remove("is-active");
 91 | 		}
 92 | 
 93 | 		function init() {
 94 | 			// set random padding for different step heights (not required)
 95 | 			step.forEach(function (step) {
 96 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
 97 | 				step.style.padding = v + "px 0px";
 98 | 			});
 99 | 
100 | 			// 1. setup the scroller with the bare-bones options
101 | 			// 		this will also initialize trigger observations
102 | 			// 2. bind scrollama event handlers (this can be chained like below)
103 | 			scroller
104 | 				.setup({
105 | 					// provide root element which is passed to IntersectionObserver as the root option
106 | 					root: document,
107 | 					step: "#scrolly article .step",
108 | 					debug: false,
109 | 					offset: 0.5
110 | 				})
111 | 				.onStepEnter(handleStepEnter)
112 | 				.onStepExit(handleStepExit);
113 | 
114 | 		}
115 | 
116 | 		// kick things off
117 | 		init();
118 | 	</script>
119 | </body>
120 | 
121 | </html>


--------------------------------------------------------------------------------
/docs/iframe/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8" />
 6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 | 	<title>Scrollama: iframe Example</title>
 8 | 	<meta name="description" content="Scrollama: iframe Example" />
 9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
10 | 	<link rel="stylesheet" href="../style.css" />
11 | 	<style>
12 | 		#scrolly {
13 | 			position: relative;
14 | 		}
15 | 
16 | 		article {
17 | 			position: relative;
18 | 			padding: 0 1rem;
19 | 			margin: 0 auto;
20 | 			width: 33%;
21 | 		}
22 | 
23 | 		.step {
24 | 			margin: 2rem auto 4rem auto;
25 | 			background-color: #3b3b3b;
26 | 			color: #fff;
27 | 		}
28 | 
29 | 		.step.is-active {
30 | 			background-color: goldenrod;
31 | 			color: #3b3b3b;
32 | 		}
33 | 
34 | 		.step p {
35 | 			text-align: center;
36 | 			padding: 1rem;
37 | 			font-size: 1.5rem;
38 | 		}
39 | 	</style>
40 | </head>
41 | 
42 | <body>
43 | 	<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
44 | 		aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
45 | 			style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
46 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
47 | 			<path
48 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
49 | 				fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
50 | 			<path
51 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
52 | 				fill="currentColor" class="octo-body"></path>
53 | 		</svg></a>
54 | 	<main>
55 | 		<nav>
56 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
57 | 			<div class="nav__examples">
58 | 				<p>Examples:</p>
59 | 				<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
60 | 				<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
61 | 				<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
62 | 				<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
63 | 				<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
64 | 				<a href="https://russellsamora.github.io/scrollama/iframe">iframe</a>
65 | 			</div>
66 | 		</nav>
67 | 		<section id="intro">
68 | 			<h1 class="intro__hed">iframe Example</h1>
69 | 			<p class="intro__dek">
70 | 				An example of embedding a Scrollama instance into an iframe.
71 | 			</p>
72 | 		</section>
73 | 		<section>
74 | 			<iframe src="basic.html" width="100%" height="200px" style="height: calc(100vh - 31rem);"
75 | 				frameborder="2"></iframe>
76 | 		</section>
77 | 	</main>
78 | 
79 | </body>
80 | 
81 | </html>


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<script>
 6 | 		window.location.href = 'https://github.com/russellsamora/scrollama'
 7 | 	</script>
 8 | </head>
 9 | 
10 | <body>
11 | </body>
12 | 
13 | </html>


--------------------------------------------------------------------------------
/docs/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/russellsamora/scrollama/33731a160f2df3f2bde33a22b366bc0281777dbb/docs/logo.png


--------------------------------------------------------------------------------
/docs/mobile-pattern/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Mobile Pattern Example</title>
  8 | 	<meta name="description" content="Scrollama: Mobile Pattern Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 		}
 15 | 
 16 | 		article {
 17 | 			position: relative;
 18 | 			padding: 0 1rem;
 19 | 			margin: 0 auto;
 20 | 			width: 33%;
 21 | 		}
 22 | 
 23 | 		.step {
 24 | 			margin: 2rem auto 4rem auto;
 25 | 			background-color: #3b3b3b;
 26 | 			color: #fff;
 27 | 		}
 28 | 
 29 | 		.step.is-active {
 30 | 			background-color: goldenrod;
 31 | 			color: #3b3b3b;
 32 | 		}
 33 | 
 34 | 		.step p {
 35 | 			text-align: center;
 36 | 			padding: 1rem;
 37 | 			font-size: 1.5rem;
 38 | 		}
 39 | 	</style>
 40 | </head>
 41 | 
 42 | <body>
 43 | 	<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
 44 | 		aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
 45 | 			style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 46 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 47 | 			<path
 48 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 49 | 				fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 50 | 			<path
 51 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 52 | 				fill="currentColor" class="octo-body"></path>
 53 | 		</svg></a>
 54 | 	<main>
 55 | 		<nav>
 56 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
 57 | 			<div class="nav__examples">
 58 | 				<p>Examples:</p>
 59 | 				<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
 60 | 				<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
 61 | 				<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
 62 | 				<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
 63 | 				<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
 64 | 			</div>
 65 | 		</nav>
 66 | 		<section id="intro">
 67 | 			<h1 class="intro__hed">Mobile Pattern Example</h1>
 68 | 			<p class="intro__dek">
 69 | 				Start scrolling to see how it works.
 70 | 			</p>
 71 | 		</section>
 72 | 		<section id="scrolly">
 73 | 			<article>
 74 | 				<div class="step" data-step="1">
 75 | 					<p>STEP 1</p>
 76 | 				</div>
 77 | 				<div class="step" data-step="2">
 78 | 					<p>STEP 2</p>
 79 | 				</div>
 80 | 				<div class="step" data-step="3">
 81 | 					<p>STEP 3</p>
 82 | 				</div>
 83 | 				<div class="step" data-step="4">
 84 | 					<p>STEP 4</p>
 85 | 				</div>
 86 | 			</article>
 87 | 		</section>
 88 | 		<section id="outro"></section>
 89 | 	</main>
 90 | 
 91 | 	<script src="../scrollama.min.js"></script>
 92 | 	<script>
 93 | 		var scrolly = document.querySelector("#scrolly");
 94 | 		var article = scrolly.querySelector("article");
 95 | 		var step = article.querySelectorAll(".step");
 96 | 
 97 | 		// initialize the scrollama
 98 | 		var scroller = scrollama();
 99 | 
100 | 		// scrollama event handlers
101 | 		function handleStepEnter(response) {
102 | 			// response = { element, direction, index }
103 | 			console.log(response);
104 | 			// add to color to current step
105 | 			response.element.classList.add("is-active");
106 | 		}
107 | 
108 | 		function handleStepExit(response) {
109 | 			// response = { element, direction, index }
110 | 			console.log(response);
111 | 			// remove color from current step
112 | 			response.element.classList.remove("is-active");
113 | 		}
114 | 
115 | 		function init() {
116 | 			// set random padding for different step heights (not required)
117 | 			step.forEach(function (step) {
118 | 				var v = 100 + Math.floor((Math.random() * window.innerHeight) / 4);
119 | 				step.style.padding = v + "px 0px";
120 | 			});
121 | 
122 | 			// find the halfway point of the initial viewport height
123 | 			// (it changes on mobile, but by just using the initial value
124 | 			// you remove jumpiness on scroll direction change)
125 | 			var midpoint = Math.floor(window.innerHeight * 0.5) + "px";
126 | 			// 1. setup the scroller with the bare-bones options
127 | 			// 		this will also initialize trigger observations
128 | 			// 2. bind scrollama event handlers (this can be chained like below)
129 | 			scroller
130 | 				.setup({
131 | 					step: "#scrolly article .step",
132 | 					debug: false,
133 | 					offset: midpoint
134 | 				})
135 | 				.onStepEnter(handleStepEnter)
136 | 				.onStepExit(handleStepExit);
137 | 		}
138 | 
139 | 		// kick things off
140 | 		init();
141 | 	</script>
142 | </body>
143 | 
144 | </html>


--------------------------------------------------------------------------------
/docs/progress/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Progress Example</title>
  8 | 	<meta name="description" content="Scrollama: Progress Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 		}
 15 | 
 16 | 		article {
 17 | 			position: relative;
 18 | 			padding: 0 1rem;
 19 | 			margin: 0 auto;
 20 | 			width: 33%;
 21 | 		}
 22 | 
 23 | 		.step {
 24 | 			margin: 2rem auto 4rem auto;
 25 | 			padding: 1rem;
 26 | 			border: 2px solid #f3f3f3;
 27 | 		}
 28 | 
 29 | 		.step p {
 30 | 			text-align: center;
 31 | 			margin: 0.5rem auto;
 32 | 			font-size: 1.5rem;
 33 | 		}
 34 | 	</style>
 35 | </head>
 36 | 
 37 | <body>
 38 | 	<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
 39 | 		aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
 40 | 			style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 41 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 42 | 			<path
 43 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 44 | 				fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 45 | 			<path
 46 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 47 | 				fill="currentColor" class="octo-body"></path>
 48 | 		</svg></a>
 49 | 	<main>
 50 | 		<nav>
 51 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
 52 | 			<div class="nav__examples">
 53 | 				<p>Examples:</p>
 54 | 				<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
 55 | 				<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
 56 | 				<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
 57 | 				<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
 58 | 				<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
 59 | 			</div>
 60 | 		</nav>
 61 | 		<section id="intro">
 62 | 			<h1 class="intro__hed">Progress Example</h1>
 63 | 			<p class="intro__dek">
 64 | 				Start scrolling to see how it works.
 65 | 			</p>
 66 | 		</section>
 67 | 		<section id="scrolly">
 68 | 			<article>
 69 | 				<div class="step" data-step="218,165,32">
 70 | 					<p>STEP 1</p>
 71 | 					<p class="progress">0%</p>
 72 | 				</div>
 73 | 				<div class="step" data-step="0,128,128">
 74 | 					<p>STEP 2</p>
 75 | 					<p class="progress">0%</p>
 76 | 				</div>
 77 | 			</article>
 78 | 		</section>
 79 | 		<section id="outro"></section>
 80 | 	</main>
 81 | 
 82 | 	<script src="https://unpkg.com/d3@5.9.1/dist/d3.min.js"></script>
 83 | 	<script src="../scrollama.min.js"></script>
 84 | 	<script>
 85 | 		// using d3 for convenience
 86 | 		var scrolly = d3.select("#scrolly");
 87 | 		var article = scrolly.select("article");
 88 | 		var step = article.selectAll(".step");
 89 | 
 90 | 		// initialize the scrollama
 91 | 		var scroller = scrollama();
 92 | 
 93 | 		function handleStepProgress(response) {
 94 | 			console.log(response);
 95 | 			var el = d3.select(response.element);
 96 | 
 97 | 			var val = el.attr("data-step");
 98 | 			var rgba = "rgba(" + val + ", " + response.progress + ")";
 99 | 			el.style("background-color", rgba);
100 | 			el.select(".progress").text(d3.format(".1%")(response.progress));
101 | 		}
102 | 
103 | 		function resize() {
104 | 			var min = window.innerHeight * 0.5;
105 | 			var h = min + Math.random() * window.innerHeight * 0.25;
106 | 			step.style("height", Math.floor(h) + "px");
107 | 			scroller.resize();
108 | 		}
109 | 
110 | 		function init() {
111 | 			// 1. setup the scroller with the bare-bones settings
112 | 			// this will also initialize trigger observations
113 | 			// 3. bind scrollama event handlers (this can be chained like below)
114 | 			scroller
115 | 				.setup({
116 | 					step: "#scrolly article .step",
117 | 					progress: true,
118 | 					debug: false
119 | 				})
120 | 				.onStepProgress(handleStepProgress);
121 | 		}
122 | 
123 | 		// kick things off
124 | 		init();
125 | 	</script>
126 | </body>
127 | 
128 | </html>


--------------------------------------------------------------------------------
/docs/scrollama.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).scrollama=t()}(this,function(){"use strict";function k({id:e,step:t,marginTop:o}){var{index:n,height:t}=t,n=`scrollama__debug-step--${e}-${n}`;let r=document.querySelector(`.${n}`);r=r||function(e){const t=document.createElement("div");t.className=`scrollama__debug-step ${e}`,t.style.position="fixed",t.style.left="0",t.style.width="100%",t.style.zIndex="9999",t.style.borderTop="2px solid black",t.style.borderBottom="2px solid black";const o=document.createElement("p");return o.style.position="absolute",o.style.left="0",o.style.height="1px",o.style.width="100%",o.style.borderTop="1px dashed black",t.appendChild(o),document.body.appendChild(t),t}(n),r.style.top=`${-1*o}px`,r.style.height=`${t}px`,r.querySelector("p").style.top=`${t/2}px`}function M(e){console.error(`scrollama error: ${e}`)}function q(e){return+e.getAttribute("data-scrollama-index")}function O(e){if("string"==typeof e&&0<e.indexOf("px")){var t=+e.replace("px","");return isNaN(t)?(err("offset value must be in 'px' format. Fallback to 0.5."),{format:"percent",value:.5}):{format:"pixels",value:t}}return"number"!=typeof e&&isNaN(+e)?null:(1<e&&err("offset value is greater than 1. Fallback to 1."),e<0&&err("offset value is lower than 0. Fallback to 0."),{format:"percent",value:Math.min(Math.max(0,e),1)})}let A,N,T;function z(e){e=e?e.scrollTop:window.pageYOffset;A!==e&&(A=e,A>N?T="down":A<N&&(T="up"),N=A)}return function(){let r={},i=function(){var t="abcdefghijklmnopqrstuvwxyz",e=Date.now();const o=[];for(let e=0;e<6;e+=1){var n=t[Math.floor(Math.random()*t.length)];o.push(n)}return`${o.join("")}${e}`}(),f=[],p,u,d,h=0,t=!1,g=!1,m=!1,v=!1,n=[];function x(){r={stepEnter:()=>{},stepExit:()=>{},stepProgress:()=>{}},n=[]}function b(e){e&&!t&&$(),!e&&t&&y(),t=e}function s(e,t){var o=q(e);const n=f[o];void 0!==t&&(n.progress=t);t={element:e,index:o,progress:t,direction:T};"enter"===n.state&&r.stepProgress(t)}function o([e]){var t=q(e.target);const o=f[t];e=e.target.offsetHeight;e!==o.height&&(o.height=e,l(o),w(o),E(o))}function a([e]){z(u);var{isIntersecting:t,target:e}=e;(t?function(e){var t=q(e);const o=f[t];e={element:e,index:t,direction:T},o.direction=T,o.state="enter",n[t]||r.stepEnter(e),v&&(n[t]=!0)}:function(e){var t=q(e);const o=f[t];o.state&&(t={element:e,index:t,direction:T},g&&("down"===T&&o.progress<1?s(e,1):"up"===T&&0<o.progress&&s(e,0)),o.direction=T,o.state="exit",r.stepExit(t))})(e)}function c([e]){var t=q(e.target),o=f[t],{isIntersecting:n,intersectionRatio:t,target:e}=e;n&&"enter"===o.state&&s(e,t)}function l({observers:t}){Object.keys(t).map(e=>{t[e].disconnect()})}function y(){f.forEach(l)}function E(e){const t=new ResizeObserver(o);t.observe(e.node),e.observers.resize=t}function w(e){var t=window.innerHeight,o=e.offset||p,n="pixels"===o.format?1:t,r=o.value*n,o=e.height/2-r,n=e.height/2-(t-r),t=`${o}px 0px ${n}px 0px`,r=d;const s=new IntersectionObserver(a,{rootMargin:t,threshold:.5,root:r});s.observe(e.node),e.observers.step=s,m&&k({id:i,step:e,marginTop:o,marginBottom:n})}function e(e){var t=window.innerHeight,o=e.offset||p,n="pixels"===o.format?1:t,n=o.value*n,n=`${-n+e.height}px 0px ${n-t}px 0px`,t=function(e,t){var o=Math.ceil(e/t);const n=[];var r=1/o;for(let e=0;e<o+1;e+=1)n.push(e*r);return n}(e.height,h);const r=new IntersectionObserver(c,{rootMargin:n,threshold:t});r.observe(e.node),e.observers.progress=r}function $(){y(),f.forEach(E),f.forEach(w),g&&f.forEach(e)}const S={};return S.setup=({step:e,parent:t,offset:o=.5,threshold:n=4,progress:r=!1,once:s=!1,debug:i=!1,container:a=void 0,root:c=null})=>{var l;return l=a,A=0,N=0,document.addEventListener("scroll",()=>z(l)),f=([e,t=document]=[e,t],("string"==typeof e?Array.from(t.querySelectorAll(e)):e instanceof Element?[e]:e instanceof NodeList?Array.from(e):e instanceof Array?e:[]).map((e,t)=>({index:t,direction:void 0,height:e.offsetHeight,node:e,observers:{},offset:O(e.dataset.offset),top:function(e){var{top:e}=e.getBoundingClientRect();return e+window.pageYOffset-(document.body.clientTop||0)}(e),progress:0,state:void 0}))),f.length?(g=r,v=s,m=i,h=Math.max(1,+n),p=O(o),u=a,d=c,x(),f.forEach(e=>e.node.setAttribute("data-scrollama-index",e.index)),b(!0)):M("no step elements"),S},S.enable=()=>(b(!0),S),S.disable=()=>(b(!1),S),S.destroy=()=>(b(!1),x(),S),S.resize=()=>($(),S),S.offset=e=>null==e?p.value:(p=O(e),$(),S),S.onStepEnter=e=>("function"==typeof e?r.stepEnter=e:M("onStepEnter requires a function"),S),S.onStepExit=e=>("function"==typeof e?r.stepExit=e:M("onStepExit requires a function"),S),S.onStepProgress=e=>("function"==typeof e?r.stepProgress=e:M("onStepProgress requires a function"),S),S}});
2 | 


--------------------------------------------------------------------------------
/docs/sticky-overlay/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Sticky Overlay Example</title>
  8 | 	<meta name="description" content="Scrollama: Sticky Overlay Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 			background-color: #f3f3f3;
 15 | 			padding: 1rem;
 16 | 		}
 17 | 
 18 | 		article {
 19 | 			position: relative;
 20 | 			padding: 0;
 21 | 			max-width: 20rem;
 22 | 			margin: 0 auto;
 23 | 		}
 24 | 
 25 | 		figure {
 26 | 			position: -webkit-sticky;
 27 | 			position: sticky;
 28 | 			left: 0;
 29 | 			width: 100%;
 30 | 			margin: 0;
 31 | 			-webkit-transform: translate3d(0, 0, 0);
 32 | 			-moz-transform: translate3d(0, 0, 0);
 33 | 			transform: translate3d(0, 0, 0);
 34 | 			background-color: #8a8a8a;
 35 | 			z-index: 0;
 36 | 		}
 37 | 
 38 | 		figure p {
 39 | 			text-align: center;
 40 | 			padding: 1rem;
 41 | 			position: absolute;
 42 | 			top: 50%;
 43 | 			left: 50%;
 44 | 			-moz-transform: translate(-50%, -50%);
 45 | 			-webkit-transform: translate(-50%, -50%);
 46 | 			transform: translate(-50%, -50%);
 47 | 			font-size: 8rem;
 48 | 			font-weight: 900;
 49 | 			color: #fff;
 50 | 		}
 51 | 
 52 | 		.step {
 53 | 			margin: 0 auto 2rem auto;
 54 | 			color: #fff;
 55 | 			background-color: rgba(0, 0, 0, 0.1);
 56 | 		}
 57 | 
 58 | 		.step:last-child {
 59 | 			margin-bottom: 0;
 60 | 		}
 61 | 
 62 | 		.step.is-active p {
 63 | 			background-color: goldenrod;
 64 | 			color: #3b3b3b;
 65 | 		}
 66 | 
 67 | 		.step p {
 68 | 			text-align: center;
 69 | 			padding: 1rem;
 70 | 			font-size: 1.5rem;
 71 | 			background-color: #3b3b3b;
 72 | 		}
 73 | 	</style>
 74 | </head>
 75 | 
 76 | <body>
 77 | 	<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
 78 | 		aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
 79 | 			style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 80 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 81 | 			<path
 82 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 83 | 				fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 84 | 			<path
 85 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 86 | 				fill="currentColor" class="octo-body"></path>
 87 | 		</svg></a>
 88 | 	<main>
 89 | 		<nav>
 90 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
 91 | 			<div class="nav__examples">
 92 | 				<p>Examples:</p>
 93 | 				<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
 94 | 				<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
 95 | 				<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
 96 | 				<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
 97 | 				<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
 98 | 			</div>
 99 | 		</nav>
100 | 		<section id="intro">
101 | 			<h1 class="intro__hed">Sticky Overlay Example</h1>
102 | 			<p class="intro__dek">
103 | 				Start scrolling to see how it works.
104 | 			</p>
105 | 		</section>
106 | 
107 | 		<section id="scrolly">
108 | 			<figure>
109 | 				<p>0</p>
110 | 			</figure>
111 | 
112 | 			<article>
113 | 				<div class="step" data-step="1">
114 | 					<p>STEP 1</p>
115 | 				</div>
116 | 				<div class="step" data-step="2">
117 | 					<p>STEP 2</p>
118 | 				</div>
119 | 				<div class="step" data-step="3">
120 | 					<p>STEP 3</p>
121 | 				</div>
122 | 				<div class="step" data-step="4">
123 | 					<p>STEP 4</p>
124 | 				</div>
125 | 			</article>
126 | 		</section>
127 | 
128 | 		<section id="outro"></section>
129 | 	</main>
130 | 
131 | 	<script src="https://unpkg.com/d3@5.9.1/dist/d3.min.js"></script>
132 | 	<script src="../scrollama.min.js"></script>
133 | 	<script>
134 | 		// using d3 for convenience
135 | 		var main = d3.select("main");
136 | 		var scrolly = main.select("#scrolly");
137 | 		var figure = scrolly.select("figure");
138 | 		var article = scrolly.select("article");
139 | 		var step = article.selectAll(".step");
140 | 
141 | 		// initialize the scrollama
142 | 		var scroller = scrollama();
143 | 
144 | 		// generic window resize listener event
145 | 		function handleResize() {
146 | 			// 1. update height of step elements
147 | 			var stepH = Math.floor(window.innerHeight * 0.75);
148 | 			step.style("height", stepH + "px");
149 | 
150 | 			var figureHeight = window.innerHeight / 2;
151 | 			var figureMarginTop = (window.innerHeight - figureHeight) / 2;
152 | 
153 | 			figure
154 | 				.style("height", figureHeight + "px")
155 | 				.style("top", figureMarginTop + "px");
156 | 
157 | 			// 3. tell scrollama to update new element dimensions
158 | 			scroller.resize();
159 | 		}
160 | 
161 | 		// scrollama event handlers
162 | 		function handleStepEnter(response) {
163 | 			console.log(response);
164 | 			// response = { element, direction, index }
165 | 
166 | 			// add color to current step only
167 | 			step.classed("is-active", function (d, i) {
168 | 				return i === response.index;
169 | 			});
170 | 
171 | 			// update graphic based on step
172 | 			figure.select("p").text(response.index + 1);
173 | 		}
174 | 
175 | 
176 | 		function init() {
177 | 
178 | 			// 1. force a resize on load to ensure proper dimensions are sent to scrollama
179 | 			handleResize();
180 | 
181 | 			// 2. setup the scroller passing options
182 | 			// 		this will also initialize trigger observations
183 | 			// 3. bind scrollama event handlers (this can be chained like below)
184 | 			scroller
185 | 				.setup({
186 | 					step: "#scrolly article .step",
187 | 					offset: 0.33,
188 | 					debug: false
189 | 				})
190 | 				.onStepEnter(handleStepEnter);
191 | 		}
192 | 
193 | 		// kick things off
194 | 		init();
195 | 	</script>
196 | </body>
197 | 
198 | </html>


--------------------------------------------------------------------------------
/docs/sticky-side/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset="utf-8" />
  6 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7 | 	<title>Scrollama: Sticky Side Example</title>
  8 | 	<meta name="description" content="Scrollama: Sticky Side Example" />
  9 | 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 10 | 	<link rel="stylesheet" href="../style.css" />
 11 | 	<style>
 12 | 		#scrolly {
 13 | 			position: relative;
 14 | 			display: -webkit-box;
 15 | 			display: -ms-flexbox;
 16 | 			display: flex;
 17 | 			background-color: #f3f3f3;
 18 | 			padding: 1rem;
 19 | 		}
 20 | 
 21 | 		#scrolly>* {
 22 | 			-webkit-box-flex: 1;
 23 | 			-ms-flex: 1;
 24 | 			flex: 1;
 25 | 		}
 26 | 
 27 | 		article {
 28 | 			position: relative;
 29 | 			padding: 0 1rem;
 30 | 			max-width: 20rem;
 31 | 		}
 32 | 
 33 | 		figure {
 34 | 			position: -webkit-sticky;
 35 | 			position: sticky;
 36 | 			width: 100%;
 37 | 			margin: 0;
 38 | 			-webkit-transform: translate3d(0, 0, 0);
 39 | 			-moz-transform: translate3d(0, 0, 0);
 40 | 			transform: translate3d(0, 0, 0);
 41 | 			background-color: #8a8a8a;
 42 | 			z-index: 0;
 43 | 		}
 44 | 
 45 | 		figure p {
 46 | 			text-align: center;
 47 | 			padding: 1rem;
 48 | 			position: absolute;
 49 | 			top: 50%;
 50 | 			left: 50%;
 51 | 			-moz-transform: translate(-50%, -50%);
 52 | 			-webkit-transform: translate(-50%, -50%);
 53 | 			transform: translate(-50%, -50%);
 54 | 			font-size: 8rem;
 55 | 			font-weight: 900;
 56 | 			color: #fff;
 57 | 		}
 58 | 
 59 | 		.step {
 60 | 			margin: 0 auto 2rem auto;
 61 | 			background-color: #3b3b3b;
 62 | 			color: #fff;
 63 | 		}
 64 | 
 65 | 		.step:last-child {
 66 | 			margin-bottom: 0;
 67 | 		}
 68 | 
 69 | 		.step.is-active {
 70 | 			background-color: goldenrod;
 71 | 			color: #3b3b3b;
 72 | 		}
 73 | 
 74 | 		.step p {
 75 | 			text-align: center;
 76 | 			padding: 1rem;
 77 | 			font-size: 1.5rem;
 78 | 		}
 79 | 	</style>
 80 | </head>
 81 | 
 82 | <body>
 83 | 	<a href="https://github.com/russellsamora/scrollama" target="_blank" class="github-corner"
 84 | 		aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
 85 | 			style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
 86 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 87 | 			<path
 88 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 89 | 				fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
 90 | 			<path
 91 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 92 | 				fill="currentColor" class="octo-body"></path>
 93 | 		</svg></a>
 94 | 	<main>
 95 | 		<nav>
 96 | 			<a href="https://github.com/russellsamora/scrollama">scrollama.js</a>
 97 | 			<div class="nav__examples">
 98 | 				<p>Examples:</p>
 99 | 				<a href="https://russellsamora.github.io/scrollama/basic">Basic</a>
100 | 				<a href="https://russellsamora.github.io/scrollama/progress">Progress</a>
101 | 				<a href="https://russellsamora.github.io/scrollama/sticky-side">Sticky Side</a>
102 | 				<a href="https://russellsamora.github.io/scrollama/sticky-overlay">Sticky Overlay</a>
103 | 				<a href="https://russellsamora.github.io/scrollama/mobile-pattern">Mobile Pattern</a>
104 | 			</div>
105 | 		</nav>
106 | 		<section id="intro">
107 | 			<h1 class="intro__hed">Sticky Side Example</h1>
108 | 			<p class="intro__dek">
109 | 				Start scrolling to see how it works.
110 | 			</p>
111 | 		</section>
112 | 
113 | 		<section id="scrolly">
114 | 			<article>
115 | 				<div class="step" data-step="1">
116 | 					<p>STEP 1</p>
117 | 				</div>
118 | 				<div class="step" data-step="2">
119 | 					<p>STEP 2</p>
120 | 				</div>
121 | 				<div class="step" data-step="3">
122 | 					<p>STEP 3</p>
123 | 				</div>
124 | 				<div class="step" data-step="4">
125 | 					<p>STEP 4</p>
126 | 				</div>
127 | 			</article>
128 | 
129 | 			<figure>
130 | 				<p>0</p>
131 | 			</figure>
132 | 		</section>
133 | 
134 | 		<section id="outro"></section>
135 | 	</main>
136 | 
137 | 	<!-- <div class='debug'></div> -->
138 | 	<script src="https://unpkg.com/d3@5.9.1/dist/d3.min.js"></script>
139 | 	<script src="../scrollama.min.js"></script>
140 | 	<script>
141 | 		// using d3 for convenience
142 | 		var main = d3.select("main");
143 | 		var scrolly = main.select("#scrolly");
144 | 		var figure = scrolly.select("figure");
145 | 		var article = scrolly.select("article");
146 | 		var step = article.selectAll(".step");
147 | 
148 | 		// initialize the scrollama
149 | 		var scroller = scrollama();
150 | 
151 | 		// generic window resize listener event
152 | 		function handleResize() {
153 | 			// 1. update height of step elements
154 | 			var stepH = Math.floor(window.innerHeight * 0.75);
155 | 			step.style("height", stepH + "px");
156 | 
157 | 			var figureHeight = window.innerHeight / 2;
158 | 			var figureMarginTop = (window.innerHeight - figureHeight) / 2;
159 | 
160 | 			figure
161 | 				.style("height", figureHeight + "px")
162 | 				.style("top", figureMarginTop + "px");
163 | 
164 | 			// 3. tell scrollama to update new element dimensions
165 | 			scroller.resize();
166 | 		}
167 | 
168 | 		// scrollama event handlers
169 | 		function handleStepEnter(response) {
170 | 			console.log(response);
171 | 			// response = { element, direction, index }
172 | 
173 | 			// add color to current step only
174 | 			step.classed("is-active", function (d, i) {
175 | 				return i === response.index;
176 | 			});
177 | 
178 | 			// update graphic based on step
179 | 			figure.select("p").text(response.index + 1);
180 | 		}
181 | 
182 | 		function init() {
183 | 
184 | 			// 1. force a resize on load to ensure proper dimensions are sent to scrollama
185 | 			handleResize();
186 | 
187 | 			// 2. setup the scroller passing options
188 | 			// 		this will also initialize trigger observations
189 | 			// 3. bind scrollama event handlers (this can be chained like below)
190 | 			scroller
191 | 				.setup({
192 | 					step: "#scrolly article .step",
193 | 					offset: 0.33,
194 | 					debug: false
195 | 				})
196 | 				.onStepEnter(handleStepEnter);
197 | 		}
198 | 
199 | 		// kick things off
200 | 		init();
201 | 	</script>
202 | </body>
203 | 
204 | </html>


--------------------------------------------------------------------------------
/docs/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | html,
  6 | body {
  7 |   margin: 0;
  8 |   padding: 0;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 13 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 14 |   min-height: 1280px;
 15 |   color: #3b3b3b;
 16 |   font-size: 24px;
 17 | }
 18 | 
 19 | p,
 20 | h1,
 21 | h2,
 22 | h3,
 23 | h4,
 24 | a {
 25 |   margin: 0;
 26 |   font-weight: 400;
 27 | }
 28 | 
 29 | a,
 30 | a:visited,
 31 | a:hover {
 32 |   color: teal;
 33 |   text-decoration: none;
 34 |   border-bottom: 2px solid currentColor;
 35 | }
 36 | 
 37 | nav {
 38 |   display: -webkit-box;
 39 |   display: -ms-flexbox;
 40 |   display: flex;
 41 |   -webkit-box-align: baseline;
 42 |   -ms-flex-align: baseline;
 43 |   align-items: baseline;
 44 |   -webkit-box-pack: justify;
 45 |   -ms-flex-pack: justify;
 46 |   justify-content: space-between;
 47 |   background: #f3f3f3;
 48 |   padding: 1rem;
 49 |   padding-right: 5rem;
 50 |   -ms-flex-wrap: wrap;
 51 |   flex-wrap: wrap;
 52 | }
 53 | 
 54 | .nav__examples {
 55 |   display: -webkit-box;
 56 |   display: -ms-flexbox;
 57 |   display: flex;
 58 |   -webkit-box-align: baseline;
 59 |   -ms-flex-align: baseline;
 60 |   align-items: baseline;
 61 |   -ms-flex-wrap: wrap;
 62 |   flex-wrap: wrap;
 63 |   margin-top: 1rem;
 64 | }
 65 | 
 66 | .nav__examples > * {
 67 |   margin-right: 0.5rem;
 68 | }
 69 | 
 70 | #intro {
 71 |   max-width: 40rem;
 72 |   margin: 1rem auto;
 73 |   text-align: center;
 74 | }
 75 | 
 76 | .intro__hed {
 77 |   font-size: 2em;
 78 |   margin: 2rem auto 0.5rem auto;
 79 | }
 80 | 
 81 | .intro__dek {
 82 |   color: #8a8a8a;
 83 | }
 84 | 
 85 | .github-corner:hover .octo-arm {
 86 |   animation: octocat-wave 560ms ease-in-out;
 87 | }
 88 | 
 89 | @keyframes octocat-wave {
 90 |   0%,
 91 |   100% {
 92 |     transform: rotate(0);
 93 |   }
 94 | 
 95 |   20%,
 96 |   60% {
 97 |     transform: rotate(-25deg);
 98 |   }
 99 | 
100 |   40%,
101 |   80% {
102 |     transform: rotate(10deg);
103 |   }
104 | }
105 | 
106 | @media (max-width: 500px) {
107 |   .github-corner:hover .octo-arm {
108 |     animation: none;
109 |   }
110 | 
111 |   .github-corner .octo-arm {
112 |     animation: octocat-wave 560ms ease-in-out;
113 |   }
114 | }
115 | 
116 | #intro {
117 |   margin-bottom: 320px;
118 | }
119 | 
120 | #outro {
121 |   height: 640px;
122 | }
123 | 
124 | @media (min-width: 840px) {
125 |   .nav__examples {
126 |     margin-top: 0;
127 |     margin-left: 2rem;
128 |   }
129 | }
130 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | export = scrollama;
 2 | declare function scrollama(): scrollama.ScrollamaInstance;
 3 | 
 4 | declare namespace scrollama {
 5 | 
 6 |   export type DecimalType = 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
 7 | 
 8 |   export type ScrollamaOptions = {
 9 |     step: NodeList | HTMLElement[] | string;
10 |     progress?: boolean;
11 |     offset?: DecimalType;
12 |     threshold?: 1 | 2 | 3 | 4;
13 |     order?: boolean;
14 |     once?: boolean;
15 |     debug?: boolean;
16 |   };
17 | 
18 |   export type ProgressCallbackResponse = {
19 |     element: HTMLElement;
20 |     index: number;
21 |     progress: DecimalType;
22 |   };
23 | 
24 |   export type CallbackResponse = {
25 |     element: HTMLElement;
26 |     index: number;
27 |     direction: "up" | "down";
28 |   };
29 | 
30 |   export type StepCallback = (response: CallbackResponse) => void;
31 |   export type StepProgressCallback = (
32 |     response: ProgressCallbackResponse
33 |   ) => void;
34 | 
35 |   export type ScrollamaInstance = {
36 |     setup: (options: ScrollamaOptions) => ScrollamaInstance;
37 |     onStepEnter: (callback: StepCallback) => ScrollamaInstance;
38 |     onStepExit: (callback: StepCallback) => ScrollamaInstance;
39 |     onStepProgress: (callback: StepProgressCallback) => ScrollamaInstance;
40 |     resize: () => ScrollamaInstance;
41 |     enable: () => ScrollamaInstance;
42 |     disable: () => ScrollamaInstance;
43 |     destroy: () => void;
44 |     offsetTrigger: (value: [number, number]) => void;
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import entry from "./src/entry";
2 | 
3 | export default entry;
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "scrollama",
 3 | 	"version": "3.2.0",
 4 | 	"description": "Lightweight scrollytelling library using IntersectionObserver",
 5 | 	"main": "build/scrollama.js",
 6 | 	"browser": "build/scrollama.js",
 7 | 	"types": "index.d.ts",
 8 | 	"scripts": {
 9 | 		"dev": "cross-env NODE_ENV=development rollup -w -c",
10 | 		"build": "npm run pretest && cross-env NODE_ENV=production rollup -c && npm run docs",
11 | 		"pretest": "cross-env NODE_ENV=development rollup -c",
12 | 		"docs": "cp build/scrollama.min.js docs"
13 | 	},
14 | 	"module": "index",
15 | 	"jsnext:main": "index",
16 | 	"repository": {
17 | 		"type": "git",
18 | 		"url": "https://github.com/russellsamora/scrollama.git"
19 | 	},
20 | 	"homepage": "https://github.com/russellsamora/scrollama#readme",
21 | 	"keywords": [
22 | 		"scrollytelling",
23 | 		"scroll",
24 | 		"scroll-driven",
25 | 		"step",
26 | 		"interactive",
27 | 		"graphic",
28 | 		"observer",
29 | 		"IntersectionObserver",
30 | 		"enter",
31 | 		"exit",
32 | 		"view",
33 | 		"trigger"
34 | 	],
35 | 	"author": "Russell Samora",
36 | 	"license": "MIT",
37 | 	"devDependencies": {
38 | 		"cross-env": "^7.0.3",
39 | 		"rollup": "^1.32.1",
40 | 		"rollup-plugin-buble": "^0.19.8",
41 | 		"rollup-plugin-commonjs": "^10.1.0",
42 | 		"rollup-plugin-filesize": "^9.1.1",
43 | 		"rollup-plugin-node-resolve": "^5.2.0",
44 | 		"rollup-plugin-uglify": "^6.0.4"
45 | 	}
46 | }


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import commonjs from "rollup-plugin-commonjs";
 2 | import resolve from "rollup-plugin-node-resolve";
 3 | import { uglify } from "rollup-plugin-uglify";
 4 | import filesize from "rollup-plugin-filesize";
 5 | 
 6 | const isProd = process.env.NODE_ENV === "production";
 7 | 
 8 | const file = `build/scrollama${isProd ? ".min" : ""}.js`;
 9 | 
10 | const plugins = [
11 |   resolve({
12 |     jsnext: true,
13 |     main: true,
14 |   }),
15 |   commonjs({
16 |     sourceMap: false,
17 |   }),
18 |   filesize(),
19 |   isProd && uglify(),
20 | ];
21 | 
22 | export default {
23 |   input: "index.js",
24 |   output: {
25 |     file,
26 |     format: "umd",
27 |     name: "scrollama",
28 |   },
29 |   plugins,
30 | };
31 | 


--------------------------------------------------------------------------------
/src/createProgressThreshold.js:
--------------------------------------------------------------------------------
1 | export default function createProgressThreshold(height, threshold) {
2 |     const count = Math.ceil(height / threshold);
3 |     const t = [];
4 |     const ratio = 1 / count;
5 |     for (let i = 0; i < count + 1; i += 1) {
6 |       t.push(i * ratio);
7 |     }
8 |     return t;
9 |   }


--------------------------------------------------------------------------------
/src/debug.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // SETUP
 3 | function create(className) {
 4 | 	const el = document.createElement("div");
 5 | 	el.className = `scrollama__debug-step ${className}`;
 6 | 	el.style.position = "fixed";
 7 | 	el.style.left = "0";
 8 | 	el.style.width = "100%";
 9 | 	el.style.zIndex = "9999";
10 | 	el.style.borderTop = "2px solid black";
11 | 	el.style.borderBottom = "2px solid black";
12 | 
13 | 	const p = document.createElement("p");
14 | 	p.style.position = "absolute";
15 | 	p.style.left = "0";
16 | 	p.style.height = "1px";
17 | 	p.style.width = "100%";
18 | 	p.style.borderTop = "1px dashed black";
19 | 
20 | 	el.appendChild(p);
21 | 	document.body.appendChild(el);
22 | 	return el;
23 | }
24 | 
25 | // UPDATE
26 | function update({ id, step, marginTop }) {
27 | 	const { index, height } = step;
28 | 	const className = `scrollama__debug-step--${id}-${index}`;
29 | 	let el = document.querySelector(`.${className}`);
30 | 	if (!el) el = create(className);
31 | 
32 | 	el.style.top = `${marginTop * -1}px`;
33 | 	el.style.height = `${height}px`;
34 | 	el.querySelector("p").style.top = `${height / 2}px`;
35 | }
36 | 
37 | export { update };
38 | 


--------------------------------------------------------------------------------
/src/dom.js:
--------------------------------------------------------------------------------
 1 | // DOM helper functions
 2 | 
 3 | // public
 4 | function selectAll(selector, parent = document) {
 5 |   if (typeof selector === 'string') {
 6 |     return Array.from(parent.querySelectorAll(selector));
 7 |   } else if (selector instanceof Element) {
 8 |     return [selector];
 9 |   } else if (selector instanceof NodeList) {
10 |     return Array.from(selector);
11 |   } else if (selector instanceof Array) {
12 |     return selector;
13 |   }
14 |   return [];
15 | }
16 | 
17 | export { selectAll };
18 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
  1 | import { selectAll } from "./dom";
  2 | import * as bug from "./debug";
  3 | import generateId from "./generateId";
  4 | import err from "./err";
  5 | import getIndex from "./getIndex";
  6 | import createProgressThreshold from "./createProgressThreshold";
  7 | import parseOffset from "./parseOffset";
  8 | import indexSteps from "./indexSteps";
  9 | import getOffsetTop from "./getOffsetTop";
 10 | import { setupScroll, direction, onScroll } from "./scroll";
 11 | 
 12 | function scrollama() {
 13 | 	let cb = {};
 14 | 
 15 | 	let id = generateId();
 16 | 	let steps = [];
 17 | 	let globalOffset;
 18 | 	let containerElement;
 19 | 	let rootElement;
 20 | 
 21 | 	let progressThreshold = 0;
 22 | 
 23 | 	let isEnabled = false;
 24 | 	let isProgress = false;
 25 | 	let isDebug = false;
 26 | 	let isTriggerOnce = false;
 27 | 
 28 | 	let exclude = [];
 29 | 
 30 | 	/* HELPERS */
 31 | 	function reset() {
 32 | 		cb = {
 33 | 			stepEnter: () => { },
 34 | 			stepExit: () => { },
 35 | 			stepProgress: () => { },
 36 | 		};
 37 | 		exclude = [];
 38 | 	}
 39 | 
 40 | 	function handleEnable(shouldEnable) {
 41 | 		if (shouldEnable && !isEnabled) updateObservers();
 42 | 		if (!shouldEnable && isEnabled) disconnectObservers();
 43 | 		isEnabled = shouldEnable;
 44 | 	}
 45 | 
 46 | 	/* NOTIFY CALLBACKS */
 47 | 	function notifyProgress(element, progress) {
 48 | 		const index = getIndex(element);
 49 | 		const step = steps[index];
 50 | 		if (progress !== undefined) step.progress = progress;
 51 | 		const response = { element, index, progress, direction };
 52 | 		if (step.state === "enter") cb.stepProgress(response);
 53 | 	}
 54 | 
 55 | 	function notifyOthers(index, location) {
 56 | 		console.log(index, location, direction, currentScrollY, previousScrollY);
 57 | 		if (location === "above") {
 58 | 			let i = direction === "down" ? 0 : index - 1;
 59 | 			let end = direction === "down" ? i < index : i >= 0;
 60 | 			let inc = direction === "down" ? 1 : -1;
 61 | 			for (i; end; inc) {
 62 | 				const step = steps[i];
 63 | 				console.log(
 64 | 					Object.keys(step)
 65 | 						.map((p) => `${p} - ${step[p]}`)
 66 | 						.join("\n ")
 67 | 				);
 68 | 				if (direction === "down") {
 69 | 					if (step.state !== "enter" && step.direction !== "down") {
 70 | 						notifyStepEnter(step.node, false);
 71 | 						notifyStepExit(step.node, false);
 72 | 					} else if (step.state === "enter") notifyStepExit(step.node, false);
 73 | 				} else if (direction === "up") {
 74 | 					if (step.state !== "enter" && step.direction === "down") {
 75 | 						notifyStepEnter(step.node, false);
 76 | 						notifyStepExit(step.node, false);
 77 | 					} else if (step.state === "enter") notifyStepExit(step.node, false);
 78 | 				}
 79 | 			}
 80 | 		} else if (location === "below") {
 81 | 			for (let i = steps.length - 1; i > index; i -= 1) {
 82 | 				const step = steps[i];
 83 | 				if (step.state === "enter") notifyStepExit(step.node);
 84 | 				if (step.direction === "down") {
 85 | 					notifyStepEnter(step.node, false);
 86 | 					notifyStepExit(step.node, false);
 87 | 				}
 88 | 			}
 89 | 		}
 90 | 	}
 91 | 
 92 | 	function notifyStepEnter(element, check = true) {
 93 | 		const index = getIndex(element);
 94 | 		const step = steps[index];
 95 | 		const response = { element, index, direction };
 96 | 
 97 | 		step.direction = direction;
 98 | 		step.state = "enter";
 99 | 
100 | 		// if (isPreserveOrder && check && direction !== "up")
101 | 		//   notifyOthers(index, "above");
102 | 		// if (isPreserveOrder && check && direction === "up")
103 | 		//   notifyOthers(index, "below");
104 | 
105 | 		if (!exclude[index]) cb.stepEnter(response);
106 | 		if (isTriggerOnce) exclude[index] = true;
107 | 	}
108 | 
109 | 	function notifyStepExit(element, check = true) {
110 | 		const index = getIndex(element);
111 | 		const step = steps[index];
112 | 
113 | 		if (!step.state) return false;
114 | 
115 | 		const response = { element, index, direction };
116 | 
117 | 		if (isProgress) {
118 | 			if (direction === "down" && step.progress < 1) notifyProgress(element, 1);
119 | 			else if (direction === "up" && step.progress > 0)
120 | 				notifyProgress(element, 0);
121 | 		}
122 | 
123 | 		step.direction = direction;
124 | 		step.state = "exit";
125 | 
126 | 		cb.stepExit(response);
127 | 	}
128 | 
129 | 	/* OBSERVERS - HANDLING */
130 | 	function resizeStep([entry]) {
131 | 		const index = getIndex(entry.target);
132 | 		const step = steps[index];
133 | 		const h = entry.target.offsetHeight;
134 | 		if (h !== step.height) {
135 | 			step.height = h;
136 | 			disconnectObserver(step);
137 | 			updateStepObserver(step);
138 | 			updateResizeObserver(step);
139 | 		}
140 | 	}
141 | 
142 | 	function intersectStep([entry]) {
143 | 		onScroll(containerElement);
144 | 
145 | 		const { isIntersecting, target } = entry;
146 | 		if (isIntersecting) notifyStepEnter(target);
147 | 		else notifyStepExit(target);
148 | 	}
149 | 
150 | 	function intersectProgress([entry]) {
151 | 		const index = getIndex(entry.target);
152 | 		const step = steps[index];
153 | 		const { isIntersecting, intersectionRatio, target } = entry;
154 | 		if (isIntersecting && step.state === "enter")
155 | 			notifyProgress(target, intersectionRatio);
156 | 	}
157 | 
158 | 	/*  OBSERVERS - CREATION */
159 | 	function disconnectObserver({ observers }) {
160 | 		Object.keys(observers).map((name) => {
161 | 			observers[name].disconnect();
162 | 		});
163 | 	}
164 | 
165 | 	function disconnectObservers() {
166 | 		steps.forEach(disconnectObserver);
167 | 	}
168 | 
169 | 	function updateResizeObserver(step) {
170 | 		const observer = new ResizeObserver(resizeStep);
171 | 		observer.observe(step.node);
172 | 		step.observers.resize = observer;
173 | 	}
174 | 
175 | 	function updateResizeObservers() {
176 | 		steps.forEach(updateResizeObserver);
177 | 	}
178 | 
179 | 	function updateStepObserver(step) {
180 | 		const h = window.innerHeight;
181 | 		const off = step.offset || globalOffset;
182 | 		const factor = off.format === "pixels" ? 1 : h;
183 | 		const offset = off.value * factor;
184 | 		const marginTop = step.height / 2 - offset;
185 | 		const marginBottom = step.height / 2 - (h - offset);
186 | 		const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
187 | 		const root = rootElement;
188 | 
189 | 		const threshold = 0.5;
190 | 		const options = { rootMargin, threshold, root };
191 | 		const observer = new IntersectionObserver(intersectStep, options);
192 | 
193 | 		observer.observe(step.node);
194 | 		step.observers.step = observer;
195 | 
196 | 		if (isDebug) bug.update({ id, step, marginTop, marginBottom });
197 | 	}
198 | 
199 | 	function updateStepObservers() {
200 | 		steps.forEach(updateStepObserver);
201 | 	}
202 | 
203 | 	function updateProgressObserver(step) {
204 | 		const h = window.innerHeight;
205 | 		const off = step.offset || globalOffset;
206 | 		const factor = off.format === "pixels" ? 1 : h;
207 | 		const offset = off.value * factor;
208 | 		const marginTop = -offset + step.height;
209 | 		const marginBottom = offset - h;
210 | 		const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
211 | 
212 | 		const threshold = createProgressThreshold(step.height, progressThreshold);
213 | 		const options = { rootMargin, threshold };
214 | 		const observer = new IntersectionObserver(intersectProgress, options);
215 | 
216 | 		observer.observe(step.node);
217 | 		step.observers.progress = observer;
218 | 	}
219 | 
220 | 	function updateProgressObservers() {
221 | 		steps.forEach(updateProgressObserver);
222 | 	}
223 | 
224 | 	function updateObservers() {
225 | 		disconnectObservers();
226 | 		updateResizeObservers();
227 | 		updateStepObservers();
228 | 		if (isProgress) updateProgressObservers();
229 | 	}
230 | 
231 | 	/* SETUP */
232 | 	const S = {};
233 | 
234 | 	S.setup = ({
235 | 		step,
236 | 		parent,
237 | 		offset = 0.5,
238 | 		threshold = 4,
239 | 		progress = false,
240 | 		once = false,
241 | 		debug = false,
242 | 		container = undefined,
243 | 		root = null
244 | 	}) => {
245 | 
246 | 		setupScroll(container);
247 | 
248 | 		steps = selectAll(step, parent).map((node, index) => ({
249 | 			index,
250 | 			direction: undefined,
251 | 			height: node.offsetHeight,
252 | 			node,
253 | 			observers: {},
254 | 			offset: parseOffset(node.dataset.offset),
255 | 			top: getOffsetTop(node),
256 | 			progress: 0,
257 | 			state: undefined,
258 | 		}));
259 | 
260 | 		if (!steps.length) {
261 | 			err("no step elements");
262 | 			return S;
263 | 		}
264 | 
265 | 		isProgress = progress;
266 | 		isTriggerOnce = once;
267 | 		isDebug = debug;
268 | 		progressThreshold = Math.max(1, +threshold);
269 | 		globalOffset = parseOffset(offset);
270 | 		containerElement = container;
271 | 		rootElement = root;
272 | 
273 | 		reset();
274 | 		indexSteps(steps);
275 | 		handleEnable(true);
276 | 		return S;
277 | 	};
278 | 
279 | 	S.enable = () => {
280 | 		handleEnable(true);
281 | 		return S;
282 | 	};
283 | 
284 | 	S.disable = () => {
285 | 		handleEnable(false);
286 | 		return S;
287 | 	};
288 | 
289 | 	S.destroy = () => {
290 | 		handleEnable(false);
291 | 		reset();
292 | 		return S;
293 | 	};
294 | 
295 | 	S.resize = () => {
296 | 		updateObservers();
297 | 		return S;
298 | 	};
299 | 
300 | 	S.offset = (x) => {
301 | 		if (x === null || x === undefined) return globalOffset.value;
302 | 		globalOffset = parseOffset(x);
303 | 		updateObservers();
304 | 		return S;
305 | 	};
306 | 
307 | 	S.onStepEnter = (f) => {
308 | 		if (typeof f === "function") cb.stepEnter = f;
309 | 		else err("onStepEnter requires a function");
310 | 		return S;
311 | 	};
312 | 
313 | 	S.onStepExit = (f) => {
314 | 		if (typeof f === "function") cb.stepExit = f;
315 | 		else err("onStepExit requires a function");
316 | 		return S;
317 | 	};
318 | 
319 | 	S.onStepProgress = (f) => {
320 | 		if (typeof f === "function") cb.stepProgress = f;
321 | 		else err("onStepProgress requires a function");
322 | 		return S;
323 | 	};
324 | 	return S;
325 | }
326 | 
327 | export default scrollama;
328 | 


--------------------------------------------------------------------------------
/src/err.js:
--------------------------------------------------------------------------------
1 | export default function err(msg) {
2 | 	console.error(`scrollama error: ${msg}`);
3 | }


--------------------------------------------------------------------------------
/src/generateId.js:
--------------------------------------------------------------------------------
 1 |   export default function generateId() {
 2 |     const alphabet = "abcdefghijklmnopqrstuvwxyz";
 3 |     const date = Date.now();
 4 |     const result = [];
 5 |     for (let i = 0; i < 6; i += 1) {
 6 |       const char = alphabet[Math.floor(Math.random() * alphabet.length)];
 7 |       result.push(char);
 8 |     }
 9 |     return `${result.join("")}${date}`;
10 |   }


--------------------------------------------------------------------------------
/src/getIndex.js:
--------------------------------------------------------------------------------
1 | export default function getIndex(node) {
2 | 	return +node.getAttribute("data-scrollama-index");
3 | }
4 | 


--------------------------------------------------------------------------------
/src/getOffsetTop.js:
--------------------------------------------------------------------------------
1 | export default function getOffsetTop(node) {
2 |   const { top } = node.getBoundingClientRect();
3 |   const scrollTop = window.pageYOffset;
4 |   const clientTop = document.body.clientTop || 0;
5 |   return top + scrollTop - clientTop;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/indexSteps.js:
--------------------------------------------------------------------------------
1 | export default function indexSteps(steps) {
2 | 	steps.forEach((step) =>
3 | 		step.node.setAttribute("data-scrollama-index", step.index)
4 | 	);
5 | }


--------------------------------------------------------------------------------
/src/parseOffset.js:
--------------------------------------------------------------------------------
 1 | export default function parseOffset(x) {
 2 | 	if (typeof x === "string" && x.indexOf("px") > 0) {
 3 | 		const v = +x.replace("px", "");
 4 | 		if (!isNaN(v)) return { format: "pixels", value: v };
 5 | 		else {
 6 | 			err("offset value must be in 'px' format. Fallback to 0.5.");
 7 | 			return { format: "percent", value: 0.5 };
 8 | 		}
 9 | 	} else if (typeof x === "number" || !isNaN(+x)) {
10 | 		if (x > 1) err("offset value is greater than 1. Fallback to 1.");
11 | 		if (x < 0) err("offset value is lower than 0. Fallback to 0.");
12 | 		return { format: "percent", value: Math.min(Math.max(0, x), 1) };
13 | 	}
14 | 	return null;
15 | }


--------------------------------------------------------------------------------
/src/scroll.js:
--------------------------------------------------------------------------------
 1 | let previousScrollY;
 2 | let currentScrollY;
 3 | let comparisonScrollY;
 4 | let direction;
 5 | 
 6 | function onScroll(container) {
 7 | 	const scrollTop = container ? container.scrollTop : window.pageYOffset;
 8 | 
 9 | 	if (currentScrollY === scrollTop) return;
10 | 
11 | 	previousScrollY = currentScrollY;
12 | 	currentScrollY = scrollTop;
13 | 	if (currentScrollY > comparisonScrollY) direction = "down";
14 | 	else if (currentScrollY < comparisonScrollY) direction = "up";
15 | 	comparisonScrollY = currentScrollY;
16 | }
17 | 
18 | function setupScroll(container) {
19 | 	previousScrollY = 0;
20 | 	currentScrollY = 0;
21 | 	comparisonScrollY = 0;
22 | 	document.addEventListener("scroll", () => onScroll(container));
23 | }
24 | 
25 | export { setupScroll, onScroll, direction, previousScrollY, currentScrollY };
26 | 


--------------------------------------------------------------------------------