Image Parallax Effect While Scrolling – parallax-image.js

Preview:

Description:

A lightweight JavaScript library that creates an illusion of depth in 2D images by making it scroll slower than the webpage background while the user scrolls down the page.

How to use it:

1. Download the package and include the main JavaScript parallax-image.js on the page.

<script src="parallax-image.js"></script>

2. Add the CSS class parallax-image to the parallax images.

<img
  class="parallax-image"
  src="1.jpg"
  alt="image"
/>
<img
  class="parallax-image"
  src="2.jpg"
  alt="image"
/>
...

3. Recommended CSS styles for the parallax images.

.parallax-image-wrapper {
  overflow: hidden;
}
.parallax-image-wrapper img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

4. Set the animation speed from 0 to 1. 0 means no parallax effect.

<img
  class="parallax-image"
  src="1.jpg"
  alt="image"
  data-speed="0.1"
/>

5. Set the height of the parallax image.

<img
  class="parallax-image"
  src="1.jpg"
  alt="image"
  data-height="50vh"
/>
<img
  class="parallax-image"
  src="2.jpg"
  alt="image"
  data-height="500px"
/>