Component: Scroll Parallax Smooth scroll-based parallax animation

What the Scroll Parallax module does

This module creates a parallax effect based on page scrolling. Elements inside a parallax container move relative to the viewport.

• Smooth scroll-based movement
• Vertical or horizontal movement
• Configurable speed and direction
• Supports additional transform properties

Basic usage

Add the attribute data-anim-parallax-parent to a container and place parallax elements inside it.

<div class="parent" data-anim-parallax-parent>

	<div data-anim-parallax class="child">
		Content
	</div>

	<div class="child" data-anim-parallax>
		Content
	</div>

</div>

Animation smoothness

Control how smoothly the element follows the scroll position.

• data-anim-parallax-smooth

<div data-anim-parallax-parent data-anim-parallax-smooth="10">
...
</div>

Reference center point

Define how the parallax offset is calculated relative to the viewport.

• top
• center
• bottom

<div
	data-anim-parallax-parent
	data-anim-parallax-center="top">
...
</div>

Parallax element settings

Each parallax element can define its own movement settings.

• data-anim-parallax-direction="1 | -1"
• data-anim-parallax-coefficient="5"
• data-axis="v | h"
• data-anim-parallax-properties

<div
	data-anim-parallax
	data-anim-parallax-direction="1"
	data-anim-parallax-coefficient="10"
	data-axis="v">
</div>

Download

Add depth and motion to your layouts using smooth scroll-based parallax animations.