Hero Parallax

A Vue component that creates a parallax effect with image grid for hero sections.

Usage

Great way to show of content

Discover amazing content and experiences as you scroll through our uniquely designed parallax gallery.

Lorem
Lorem
Ipsum
Ipsum
Dolor
Dolor
Sit
Sit
Amet
Amet
Consectetur
Consectetur
Adipisicing
Adipisicing
Elit
Elit
Expedita
Expedita

Props

PropDescription
itemsAn array of objects containing image data (img, name, link). Default is an empty array.
triggerElementSelector for the scrollable element. Defaults to window if not provided.
classAdditional CSS classes to apply to the component. Default is an empty string.

How it Works

  1. The component arranges images in a grid layout, with three images per row.
  2. On scroll, it creates a parallax effect using GSAP and ScrollTrigger:
    • The entire container rotates and moves vertically.
    • Each row of images moves horizontally in alternating directions.
  3. Images have a hover effect that lifts them slightly and reveals the image name.
  4. The component is responsive and recalculates dimensions on window resize.

Customization

You can customize the HeroParallax component in several ways:

  • Modify the items prop to change the images and links displayed in the grid.
  • Adjust the class prop to add custom styles or utility classes.
  • Fine-tune the parallax effect by modifying GSAP animation parameters in the component's script.
  • Customize the appearance of image cards by modifying the CSS classes and inline styles.

Note

The HeroParallax component relies on GSAP and ScrollTrigger for animations. Ensure these libraries are properly installed and imported in your project for the component to function correctly. The component is designed to work with both window scrolling and custom scroll containers, providing flexibility in various layout scenarios.

Grid Distortion
A Vue component that creates an interactive grid distortion effect on images with mouse movement and chromatic aberration
All Components