Simple Configurable Parallax Effect With Pure JavaScript – parallax-lib

Preview:

Description:

A small and standalone JavaScript library that applies a parallax scrolling effect to background images with configurable speed and direction.

How to use it:

Add a background image to your parallax container.

<div id="hero-header">
  <h1>Hello World!</h1>
</div>

#hero-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url(bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

Create a new Parallax instance and done. Possible parameters:

• element: parallax element
• speed: animation speed in seconds
• direction: reverse the direction

window.onload = function() {
  var el = document.querySelector("#hero-header");
  // Parallax(element, speed, direction)
  new Parallax(el, 3, true);
  
}