← All effects

Zoom Hero

ScrollVanilla JS · zero dependenciesscale + brightness, compositor-only
The camera pulls back
scroll and the hero recedes into the page
scroll inside ↓
-- fps
prefers-reduced-motion detected — hero stays put while you scroll

X-ray · layers

the visual shrinks away
it darkens as it recedes
the title drifts the other way

Parameters

Zoom from1.25×
Dim to0.45
Title travel80 px
Zoom span0.70
your version · updates as you tinker

How this effect works

The hero starts slightly too big — scaled to the zoom from value — and eases down to its natural size as you scroll through the zoom span portion of the track. Because scale is a compositor transform, the browser animates it without repainting a single pixel. Starting oversized and settling to 1 (rather than 1 shrinking to 0.8) is the professional detail: the resting state of your page is pixel-perfect, and the "zoom" is only ever a departure from it.

Dim ties brightness to the same progress — receding things lose light — and counter-move pushes the title up faster than the visual shrinks. That disagreement between foreground and background speeds is the same trick as parallax: two things moving differently is what your brain accepts as 3D. All three read the one scroll progress number; none of them keep any state.

Production notes: prefers-reduced-motion: everything holds its resting state · transform + filter only — no layout, no repaint · ease the progress (we use ease-out) or the effect feels tied to the scrollbar with string · the copied snippet is self-contained with its own demo scroll box.