HTML5 / JavaScript Image Parallax Scrolling Effect – Parallax.js

Preview:

Description:

Parallax.js is an ECMAScript 6 compatible JavaScript library for implementing image parallax scrolling effects on your web page. All the configuration options can be passed via HTML5 data attributes on img tag.

Installation:

# NPM
$ npm install scroll-parallax --save

Basic usage:

Include the parallax.js on your web page when needed.

<script src="dist/Parallax.js"></script>

Wrap your parallax images into a position: relative container with a fixed height.

<section class="parallax-container" style="height: 80vh;">
  <img class="parallax" data-center="0.62" data-intensity="20" src="1.jpg" >
</section>

.parallax-container {
  position: relative;
  overflow: hidden;
}

Make the parallax image position: absolute.

img {
  position: absolute;
}

Active the parallax scrolling effect on the image as you scroll the web page.

var parallax = new Parallax('.parallax', {//OPTIONS})

You can also pass in the options in the JavaScript.

var parallax = new Parallax('.parallax', {
    // the offset top and bottom boundaries in pixels used by the parallax to consider an image in the viewport
    offsetYBounds: 50,
    // the intensity of the parallax effect
    intensity: 30,
    // the vertical center of the parallax. 
    // If you increase this value the image will be centered more on the top of the screen reducing it will look centered at bottom
    center: 0.5,
    // the safe image height gap value in percentage that ensures it can always properly parallax
    safeHeight: 0.15
})

Changelog:

v2.1.0 (08/02/2018)

• added: the possibility to instantiate the Parallax class without DOM selectors
• updated: improved the destroy method restoring the initial DOM elements state
• Bugfix