Simple Configurable Parallax Effect With Pure JavaScript – parallax-lib

Category: Animation , Javascript | April 2, 2018
Author: kirillrezanov
Views Total: 1,310 views
Official Page: Go to website
Last Update: April 2, 2018
License: MIT

Preview:

Simple Configurable Parallax Effect With Pure JavaScript – parallax-lib

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);
  
}

You Might Be Interested In:


Leave a Reply