Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

About

Straight-forward parallax scrolling background images as an ES6 module

Resources

License

You can’t perform that action at this time.