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

import 'motion-components/motion-parallax'   // just this one
import 'motion-components'               // or the whole library
 
<!-- subtle parallax drift (background depth) -->
<motion-parallax depth="0.3">
  <img src="bg.jpg" />
</motion-parallax>

<!-- moderate parallax drift -->
<motion-parallax depth="0.8">
  <h2>Midground</h2>
</motion-parallax>

<!-- strong parallax drift (foreground feel) -->
<motion-parallax depth="1.5">
  <span>Foreground</span>
</motion-parallax>

Horizontal

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

◀ slow fast ▶ 
<motion-parallax depth="0.3" axis="x">◀ slow drift</motion-parallax>
<motion-parallax depth="1.4" axis="x">fast drift ▶</motion-parallax>

Properties

Attribute Property Type Default Description
depth depth number 0.5 Parallax depth. 0 moves with the page, 0.5 is moderate, 1 is a strong drift. Higher values drift further.
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.