HTML5 / JavaScript Image Parallax Scrolling Effect – Parallax.js

Category: Animation , Javascript , Recommended | August 2, 2018
Views Total:3,400 views
Official Page:Go to website
Last Update:August 2, 2018


HTML5 / JavaScript Image Parallax Scrolling Effect – Parallax.js


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.


$ 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" >
.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


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

You Might Be Interested In:

Leave a Reply