A simple thing for triggering 'them scroll effects that everybody loves
npm install @hugeinc/scrollifyScrollify. Do things on scroll. 3KB minified and gzipped.
Well, whatever you want. Common effects such as parallax or toggling a class on/off are possible and bundled within. However, you may also easily create your own custom scroll function, and pass it in to Scrollify. The built-in effects include:
- Stick: sticks an element to a particular point and holds in there for a pre-defined number of pixels.
- Parallax: move stuff on scroll. A subtle effect that transitions elements more slowly (or perhaps quickly) than the speed of the user-scroll.
- Toggle: turn a CSS class on or off if the element crosses a particular threshold on the page.
- Translate: translate an element along the X- or Y- axis.
- Rotate: rotate an element via scroll.
- Scale: scale an element.
- Fade: change an element's opacity.
window.addEventListener('load'...` rather than the more common `'DOMContentLoaded'`.Demo
First, install dependencies and spin up a webserver via
`npm i && npm start`. Navigate to `localhost:8080/demo` to check out the demos. Code samples are therein.Getting Started
Either:
* npm:
`npm i @hugeinc/scrollify``