Author: | kirillrezanov |
---|---|
Views Total: | 1,478 views |
Official Page: | Go to website |
Last Update: | April 2, 2018 |
License: | MIT |
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); }