Awesome
Parallaxify
Such deep. Very scroll. Wow background.
Parallaxify allow you to add parallax effect to background images when scrolling. It's a simple standalone JavaScript module (no jQuery or similar required) that is less thant 1kb (minified & gzipped).
Installation
You can install parallaxify from npm
$ npm install parallaxify
Or using bower
$ bower install parallaxify
Parallaxify can obviously be downloaded directly.
No dependencies
There is nothing you need. No jQuery or something.
Compatibility
Parallaxify should work with IE < 9 if you add window.getComputedStyle polyfill.
Usage
new Parallaxify({
elements: ".js-Parallaxify" // default
, backgroundYMin: 100 // default
, backgroundYMax: 0 // default
}).registerUpdate()
This will enable Parallaxify on this kind of HTML elements
<div class="js-Parallaxify"></div>
Note that the elements must have content or width/height. See the example page to check what you might need.
Options
elements (String or Array, default ".js-Parallaxify")
CSS Selector to use to retrieve elements to apply Parallaxify. Can be an array of elements, an HTMLCollection, or a NodeList.
new Parallaxify({ elements: document.getElementsByClassName(".parallax") }
backgroundYMin (Integer, default 100)
Default background position Y value when the element appears in the viewport.
Can be define for each elements using data-parallaxify-y-min.
See the test page for examples.
backgroundYMax (Integer, default 0)
Background position Y value when the element appears in the viewport.
Can be define for each elements using data-parallaxify-y-max.
See the test page for examples.
API
Parallaxify.toArray()
Transform HTMLCollection, NodeList or similar to an array of DOM elements.
Parallaxify.prototype.update()
Just update Parallaxify elements.
You don't need to use this method unless you want to have full control of Parallaxify behavior.
Parallaxify.prototype.requestUpdate()
Used to call update() method through requestAnimationFrame().
Parallaxify.prototype.registerUpdate()
Use this function to enable Parallaxify automatically requestUpdate().
It create a requestAnimationFrame loop but trigger update only if scroll have changed (just using window scroll give laggy results),
This will also attach the same behavior to window resize. Just to be sure.
If you don't want to make a requestAnimationFrameLoop, you can eventually listen
window scroll/resize & trigger update() and can skip registerUpdate()/requestUpdate().
Note that it will probably result to more laggy results.
Changelog
Contributing
Please read the file nobody reads (make me lie) CONTRIBUTING.md
tl;dr;
Fork, clone, then
$ npm i -g gulp
$ npm i
$ gulp
Now you can work on the file, then make a commit and a push something when gulp doesn't show any error. Thanks.