Parallax Image

A Vue component that creates a parallax effect on an image as the user scrolls.

Usage

Scroll down for parallax effect

Props

Prop	Type	Default	Description
`src`	String	`null`	The source URL of the image to be displayed.
`scrub`	Boolean, Number	`true`	Determines if the parallax effect should be tied directly to scroll position.

How it Works

The component renders an img element with the provided src.
On mount, it sets up a GSAP animation with ScrollTrigger.
As the user scrolls, the image's objectPosition is animated from 'center 100%' to 'center 0%'.
The parallax effect is triggered when the image enters the viewport and ends when it leaves.

Customization

You can customize the appearance and behavior of the ParallaxImage component:

Modify the src prop to change the displayed image.
Adjust the scrub prop to change how the animation responds to scrolling.
Modify the GSAP animation parameters in the component to adjust the parallax effect.

Dependencies

This component requires the following libraries:

GSAP (GreenSock Animation Platform)
ScrollTrigger plugin for GSAP

Make sure these dependencies are installed and properly imported in your project.

Note

The ParallaxImage component is designed to work within scrollable containers. Ensure that the parent element has sufficient height for scrolling to occur and trigger the parallax effect.

Modal

A set of components for creating customizable modal dialogs with smooth transitions.

Popover

A Vue component that creates a customizable popover with various trigger modes and placement options.