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 · CardsPreview
Scroll the page to see the layers move at different speeds.
Import
Horizontal
Set axis="x" to shift horizontally as you scroll vertically.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | number | 0.5 | Parallax intensity. 0 = no drift (scrolls with page), 0.5 = moderate, 1 = strong drift, 2 = double intensity. |
| | | string | 'y' | 'y' for vertical parallax, 'x' for horizontal. |
Reduced motion: when prefers-reduced-motion: reduce is set, all parallax movement is disabled.
Accessibility
Respects prefers-reduced-motion: when enabled, all parallax movement is disabled and the element renders at its natural position.