Easy Parallax Scrolling Effect In Vanilla JavaScript – parallax-vanilla

Preview:

Description:

A dependency-free JavaScript library to implement the Parallax Scrolling effect on your background images using requestAnimationFrame() API.

How to use it:

Add the parallax block with a background image to a container:

<div class="para-container">
  <div class="para-block" style="background-image: url('bg.jpg')"> </div>
  </div>
</div>

The parallax container must have a fixed height.

.para-container {
  overflow: hidden;
  height: 220px;
}

The required CSS styles for the parallax block.

.para-container .para-block {
  width: 100%;
  height: 140%;
  will-change: transform;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

Initialize the parallax library and done.

pv.init();

All default settings to customize the parallax effect.

pv.init({
  container : {
    class         : 'para-container',
    height        : undefined
  },
  block : {
    class         : 'para-block',
    speed         : -Math.PI,
    image         : undefined
  }
});

Changelog:

v1.2.0 (07/13/2019)

• Migrate to typescript

v1.1.3 (06/19/2018)

• Replaced spreader with for-loop for browser support