README
Parallax
Move elements on the page at different speeds and rotations as a user scrolls.
Install
Node
npm install @celsowhite/parallax --save
Browser
Download the library file from dist/parallax.umd.js and include it in your sites files.
Setup
Node
import parallax from '@celsowhite/parallax';
Browser
The script relies on @celsowhite/element-in-view. When using the script in the browser you must include element-in-view before parallax.
<script src="demo/vendor/element-in-view.umd.js"></script>
<script src="dist/parallax.umd.js"></script>
Usage
JS
Pass the element selector you want to parallax to the init function.
// Init
parallax('.parallax-item');
HTML
Add the selector class and data attribute options to your html.
<div class="parallax-item" data-speed="1.5" data-rotate="40"></div>
<div class="parallax-item" data-speed=".5" data-rotate="-90"></div>
Settings
Parameters
selector
{String} The css selector for the elements you'd like to parallax.
Data Attributes
Add the below data attributes directly to your html markup. Each attribute is optional.
data-speed
{Number} A number between 0-1 will slow the element down relative to other elements on the page. Any number above 1 will speed the element up. Negative numbers will move the element in the opposite direction of other elements on the page.data-rotate
{Number} The number of degrees the element should rotate while it is in the viewport. Should be between 0-360 and can be negative to rotate in the opposite direction.
License
MIT License © Celso White