Scroll· 4 sites
Reference: CSS sticky positioning, MDN contributors
How it works
A short deck piles up through native sticky positioning, with a tunable top-edge offset.In 5 steps.
The next card does the moving; the previous one simply stays put. CSS sticky gives the deck its physical logic without turning scrolling into a JavaScript animation. Small exposed edges keep the sequence legible.
The controls below are authored demonstration values, not measurements of the linked sites. The stored fits currently describe scroll smoothing and intro curves, not this effect's geometry; see each site's spec sheet for those separately measured values and fit errors.
- 01
Keep the cards in document order
Each card remains a real article in a tall section. Its natural position determines when it reaches the stack.
- 02
Offset each sticky top
Add a small edge offset per card so earlier layers remain visible. Later DOM siblings paint above earlier ones.
- 03
Leave room after the last card
A tail below the deck lets the last card reach its sticky position before the parent releases the stack.
- 04
Unstack for reduced motion
Remove sticky positioning so all card text remains available without overlapping.
- 05
Dispose cleanly
Call destroy() when the view unmounts to disconnect resize and preference observers, remove scroll listeners and cancel pending frames.