Author: | AlainBarrios |
---|---|
Views Total: | 3,785 views |
Official Page: | Go to website |
Last Update: | October 11, 2018 |
License: | MIT |
Preview:

Description:
A vanilla JavaScript parallax scroll library that applies parallax, translate, scale and fade effects to images on page scroll.
How to use it:
Import the JavaScript file parallax-js.js
into the html file.
<script src="./src/parallax-js.js"></script>
Add the parallax class and data-parallax attribute to parallax images and then insert them into parallax containers as follows:
<div class="parallax-container"> <img src="1.jpg" alt="Image 1" class="parallax" data-parallax> </div> <div class="parallax-container"> <img src="2.jpg" alt="Image 2" class="parallax" data-parallax> </div> ...
Make the parallax image absolutely positioned.
.parallax-container{ position: relative; min-height: 100vh; overflow: hidden; margin-top: 1000px; margin-bottom: 1000px; } .parallax{ position: absolute; }
Apply extra translate, scale, and fade animations to the images on page scroll.
<div class="parallax-container"> <img src="1.jpg" alt="Image 1" class="parallax" data-parallax data-translate="true" data-scale="true" data-opacity="true"> </div>
Set the animation speed (0-1).
<div class="parallax-container"> <img src="1.jpg" alt="Image 1" class="parallax" data-parallax data-speed="1"> </div>
Sometimes you might need to reverse the parallax effect.
<div class="parallax-container"> <img src="1.jpg" alt="Image 1" class="parallax" data-parallax data-reverse="true"> </div>