Parallax. Moves stuff on scroll.
- With npm:
npm install @apathetic/parallax - With git:
git clone ....
Consume the module however you wish, and then:
Parallax.init('.parallax');Elements on the page can have different attributes, as referenced through particular data-atrributes. For example:
| name | default | description |
|---|---|---|
| el (String) | .parallax | selector of elements to parallax-ify |
| mode (Integer) | 1 | There are two different modes: mode 1: Commence parallaxing items only when they appear within the viewport mode 0: Parallax items universally, irrespective of where they are on the page |
| range (Integer) | 200 | The total distance (in px) to parallax an element (only applies when mode = 1) |
| speed (Integer) | 0 | The speed of the parallax, relative to the scroll. For example: -1: translate up as fast as you scroll up (ie. moving upwards at 2x the scroll) 0: normal (ie. no effect) 1: translate down as fast as you scroll up (ie. "fixed" position) |
Note: You may also set these via a data attribute on the element e.g.:
<div class="parallax item" data-parallax-speed="1"></div>- IE9+
- Safari / Chrome
- Firefox
Please see the demo directory
- initial commit