PARALLAX Every Layer Moves motion-parallax ↓ scroll

The speed spectrum

Same scroll. Different speeds.

speed="0" Fixed: scrolls with the page
speed="0.5" Moderate: gentle drift
speed="1.5" Fast: races past slower layers

Composing depth

Three planes.
One scroll.

01

Deep
Background

Barely moves. Anchors the scene, far away, calm, still.
02

Middle
Ground

Natural movement. The eye follows here first.
03

Near
Foreground

Fast and close. Races past. Demands attention.

Horizontal parallax

Drift
sideways.

BACKGROUND MIDGROUND FOREGROUND

axis="x": horizontal movement on vertical scroll

Parallax is the space between layers.
Scroll reveals what was always there.
← Docs Scene showcase →