Nanometer Process Machine

    parallaxify

    0.1.1 • Public • Published

    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.

    License

    Install

    npm i parallaxify

    DownloadsWeekly Downloads

    9

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • moox