04 / Scroll-driven

Parallax

The layers move at different rates, and the difference between the rates is the part you read as distance.

also called differential scroll · multiplane

The oldest trick here and the easiest to overdo. It reads as depth only when the rates differ by a little; large offsets read as broken layout. Built on a view progress timeline it costs no JavaScript.

How it is built

@keyframes drift { from { transform: translateY(-10%) } to { transform: translateY(10%) } } animation: drift linear both; animation-timeline: view(); /* each layer gets its own distance; the difference is the depth */