High Performance Parallax Scroll Effect In Pure JavaScript – Vanilla-Parallax.js

Vanilla-Parallax.js is a pure vanilla JavaScript library which lets you apply high performance, hardware accelerated and responsive parallax scrolling effects to web content.

How to use it:

Include both Vanilla-Parallax.js and Vanilla-Parallax.css on the webpage.

<link rel="stylesheet" href="vanilla-parallax.css">
<script src="vanilla-parallax.min.js"></script>

Add your parallax images to a container using para- attributes as follows:

• para-height: container height
• para-speed: The speed and direction at which the parallax animated. Negative values will animate the `block` upwards when scrolling downwards on the page. The inverse apply for positive values. All values are allowed except 0. If 0 is picked, the default value will be applied.
• para-image: path to the parallax image.

<div class="para-container" para-height="50vh">
  <div class="para-block" para-speed=-1.0 para-image="bg.jpg"></div>
</div>

You can also apply the parallax scrolling effect to target containers and blocks like this:

vp.init({
  container : {
    class : 'para-container',
    height : '333px',
    heightSuffix : 'px'
  },
  block : {
    class : 'para-block',
    speed : -1,
    mediatype: image, // image, video or none
    mediapath: "bg.jpg", // path to file
    mute: false
  }
});

Changelog:

v1.2.3 (10/13/2021)

• replaced spreader with for-loop for browser support

v1.1.3 (08/29/2018)

• replaced spreader with for-loop for browser support