Scroll Progress
A long read
Scroll this window and watch the bar and the badge answer. Every scroll effect on this site starts from the same single number: how far you have scrolled, divided by how far you could.
Halfway there. The bar above is that number as a width; the ring is the same number as an arc length.
The colour shift you may notice is the number a third time — mapped onto a hue.
The end. 100% — and everything above agrees, because it is all one number.
X-ray · layers
Parameters
How this effect works
Every scroll effect on this site is built on one number: progress = scrolled / scrollable, running 0 at the top and 1 at the bottom. This page is that number wearing three costumes at once: the bar is progress as a width, the ring is progress as an arc — a circle whose stroke-dashoffset shrinks as you read — and the colour shift is progress as a hue, drifting from violet toward pink as you approach the end.
The smoothing slider adds the one refinement worth having: instead of snapping to the target, the displayed value chases it with a small lerp each frame, so wheel clicks and touch flicks render as glides. Everything runs off the scroll event of this stage (your page would use the window), and nothing repaints unless you actually scroll.