Drifts up or down at its own speed while the page scrolls, creating a depth effect against elements that scroll normally. Like Tilt In, Parallax is scrub-based — always tied to scroll position, never a one-shot animation.
Classes
Parallax only has one form — -pl, -st and the bare class all behave the same, since it's always scroll-linked:
| Class | Plays |
|---|---|
fx-parallax-st (recommended) | Drifts continuously as the page scrolls |
Options that matter
- Y shift —
fx-y-[n], default50(pixels). The element moves from-nto+nas it crosses the viewport — bigger numbers drift further. - Start position —
fx-start-[pos], defaulttop 85%.
Duration and ease have no effect here since motion is driven by scroll position, not a timer.
Example
<img src="cloud.png" class="fx-parallax-st fx-y-[120]" alt="" />
Best used on images or decorative elements — parallaxing body text can hurt readability.