Author: | computergnome99 |
---|---|
Views Total: | 491 views |
Official Page: | Go to website |
Last Update: | June 15, 2021 |
License: | MIT |
Preview:

Description:
A super tiny (less than 1kb minified) parallax JavaScript library that moves the parallax elements based on the current scroll position on vertical page scrolling.
How to use it:
1. Add a parallax element to the page.
<div class="container"> <div class="parallax"></div> </div>
2. Make the parent container relative positioned.
.container { position: relative; overflow: hidden; height: 200vh; }
3. The necessary CSS styles for the parallax element.
.parallax { position: absolute; width: 100vw; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.15); z-index: -99; background-position: bottom; background-size: cover; background-image: url("bg.jpg"); }
4. Load the main script parallax.js
in the document and done.
<script src="parallax.js"></script>
5. Set the factor of displacement after each scroll. Between 0 to 10.
<div class="container" data-depth="5"> <div class="parallax"></div> </div>