motion-parallax

Scroll-linked depth shift. Wrap any element to make it move slower or faster than the page scroll — no JavaScript required.

Live showcase → Depth layers · Horizontal drift · Cards

Preview

Scroll the page to see the layers move at different speeds.

BACKGROUND

MIDGROUND

FOREGROUND

Import

Horizontal

Set axis="x" to shift horizontally as you scroll vertically.

◀ slow

fast ▶

Properties

Attribute	Property	Type	Default	Description
speed	speed	number	0.5	Parallax intensity. `0` = no drift (scrolls with page), `0.5` = moderate, `1` = strong drift, `2` = double intensity.
axis	axis	string	'y'	`'y'` for vertical parallax, `'x'` for horizontal.
container	container	string	''	CSS selector for a custom scroll container. Defaults to document scroll when empty.

Reduced motion: when prefers-reduced-motion: reduce is set, all parallax movement is disabled.

JavaScript API

Control the parallax effect programmatically with play(), pause(), finish(), and cancel(). Pause unbinds the scroll listener so the card freezes mid-drift, finish snaps to the end offset, cancel resets to the natural position. Scroll the box while running to drive the drift.

Parallax API

playState: –

Accessibility

Respects prefers-reduced-motion: when enabled, all parallax movement is disabled and the element renders at its natural position.