Open-source demo collection
The scrollbar is a timeline. These pages play it.
Five self-contained pages, each teaching one family of scroll-driven techniques: viewport reveals, performant parallax, pinned storytelling scenes, the new CSS scroll timelines, and reading-progress UI. No build step, no libraries — clone, open, view source. The comments are the documentation.
reveals.html
Reveal on scroll
One reusable IntersectionObserver function drives fade-ups, staggered grids, directional entrances, once-vs-repeat behaviour, and a hands-on look at threshold and rootMargin.
parallax.html
Parallax, done right
Depth without jank: transform-only layers updated inside requestAnimationFrame, a layered hero, a speed comparison — and why background-attachment: fixed betrays you on mobile.
pinned-scenes.html
Pinned scenes
Editorial scrollytelling: a 300vh section pins its stage with position: sticky while getBoundingClientRect turns raw scroll into a 0–1 progress value that drives a three-step story.
css-scroll-timelines.html
CSS scroll timelines
The zero-JavaScript future: animation-timeline: scroll() and view() power a reading bar, an image that scales into view and sliding text — wrapped in @supports with an honest fallback.
progress.html
Progress & orientation
The quiet workhorses of long-form pages: a ten-line reading-progress bar, a table of contents that highlights the section under your eyes, and a back-to-top button that knows when to appear.
House rules
- Zero dependencies Plain HTML, CSS and vanilla JS. Everything renders offline; every demo fits in one file you can actually read.
- Reduced motion is respected Every page carries a prefers-reduced-motion block. Decorative movement collapses to opacity or disappears entirely — that is part of the craft.
- Comments that teach The source explains the technique, not just the syntax: why the observer unobserves, why transforms beat top/left, why the runway is 300vh.