parallax-scroll v0.3.0

Parallax

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

2. Import the parallax function:

   import parallax from 'parallax-scroll';

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

   var parallax = require('parallax-scroll');

3. 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();

4. 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>

5. 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(0, 0, 0);
     }