Parallax Images

The parallax-images-on-scroll plugin creates a smooth and engaging vertical parallax effect for images as they scroll into view. Powered by GSAP  and the ScrollTrigger  plugin, it automatically calculates the height difference between an image and its container to apply a seamless scrubbing animation.

In development, it is implemented in assets/js/modules/parallax-images-on-scroll.js and initialized automatically by assets/js/main.js.

Markup Requirements

To use the plugin, you need a container element and an image inside it. Apply the data-parallax-image-on-scroll attribute to the container element:

• data-parallax-image-on-scroll: The wrapper element that acts as the trigger for the parallax effect.
• <img>: A child image element within the wrapper. For the parallax effect to be visible, the image must be taller than its container wrapper (e.g., using a fixed height with overflow: hidden on the wrapper, while the image itself spans a larger height like h-[120%]).

Markup Example

Below is an example of how to implement the parallax image on scroll effect:

<!-- The wrapper element with the data attribute and hidden overflow -->
<div data-parallax-image-on-scroll class="relative h-[400px] overflow-hidden rounded-xl">
  <!-- The image must be taller than the wrapper (e.g., h-[120%]) -->
  <img 
    src="path/to/your/image.jpg" 
    alt="Parallax image" 
    class="h-[120%] w-full object-cover" 
  />
</div>

Demo Example

View the complete code sample on this page.

Case Studies Post Page