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

Readme

Keywords

Package Sidebar

Install

npm i parallax-scroll

Weekly Downloads

16

Version

0.3.0

License

MIT

Last publish

Collaborators

  • angusfretwell