Parallax, Translate, Scale And Fade Animations On Scroll – parallax-js

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>