Nascent Political Miscreant

    parallax-scroll

    0.3.0 • Public • Published

    Parallax

    Travis Code Climate Codecov NPM Version NPM Downloads

    Straight-forward parallax scrolling background images as an ES6 module.

    Features

    • Easily import as an ES6 module
    • Plain old JavaScript; no jQuery
    • Simple as heck and really tiny
    • Looks pretty cool

    Usage

    1. Install Parallax with npm:
    npm install --save parallax-scroll
    1. Import the parallax function:
    import parallax from 'parallax-scroll';

    Alternatively, an old-school require() will work:

    var parallax = require('parallax-scroll');
    1. Create a new instance of Parallax, passing the constructor a selector, DOM element, or array of DOM elements, and optionally a hash of options, and then call the animate() function on the resulting object:
    const parallax = new Parallax('.js-parallax', {
      speed: 0.2, // Anything over 0.5 looks silly
    });
     
    parallax.animate();
    1. Write some markup for your parallax elements:
    <div class="o-banner">
      <div class="o-banner__img js-parallax" style="background-image: url(path/to/some/img.jpg);"></div>
    </div>
    1. As well as some structural CSS:
    .o-banner {
      /**
       * You'll likely want to set a height for the elements, perhaps based on the
       * viewport as in this example
       */
      min-height: 70vh;
      position: relative;
    }
     
      .o-banner__img {
        position: absolute;
        width: 100%;
        left: 0;
     
        /**
         * Adjust the height (or width), and offset the element's position based
         * on the aspect of your images
         */
        height: 110%;
        top: -5%;
     
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
     
        transform: translate3d(000);
      }

    Install

    npm i parallax-scroll

    DownloadsWeekly Downloads

    76

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • angusfretwell