Ultra-light Parallax Scrolling JavaScript Library – parallax-js

Category: Animation , Javascript | June 15, 2021
Author:computergnome99
Views Total:298 views
Official Page:Go to website
Last Update:June 15, 2021
License:MIT

Preview:

Ultra-light Parallax Scrolling JavaScript Library – parallax-js

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>

You Might Be Interested In:


Leave a Reply