Straight-forward parallax scrolling background images as an ES6 module
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.babelrc
.editorconfig
.eslintrc
.gitignore
.hound.yml
.npmignore
.travis.yml
LICENSE
README.md
npm-shrinkwrap.json
package.json
source.js

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);
  }