Reading progress bar, image parallax bands and soft fade-ups, driven by native CSS scroll timelines (off the main thread), with a tiny JS fallback for older browsers.
Scroll: the bar at the very top tracks reading progress; the band photos drift; the cards rise softly as they enter.
Two chairs, no rush
Maria opened the studio on Sunset in 2012. One appointment per stylist at a time.
Prices
Women's cut + blow-dry$65
Men's cut$40
Gloss / toner$55
Root touch-up$85
Balayagefrom $220
Nails at the back table
Gel and natural, short and square is the house favourite.
Long editorial pages: restaurants (one plate/room band), salons, remodelers, landscapers
What it does
Three CSS-only pieces on animation-timeline: .wbl-progress scales with scroll(root); .wbl-par clips a photo that drifts ±7% across its view() (scaled 1.18 so no edge ever shows); [data-sd=fade] rises from 25% opacity during the first 70% of its entry, so nothing is ever blank or stuck. Where scroll timelines are missing, module.js drives the bar and parallax with one passive rAF handler limited to visible frames; fade-ups simply show.
When to use
One or two parallax bands per page (skill rule), on wide photos with the subject in the middle.
The progress bar on long pages: guides, menus, about/story pages.
Don't
Parallax on photos with faces or text near the edges (it crops 7%).
Fade every element: section headings and key cards only.
Combine with batch 1's parallax on the same photo.
Reduced motion, no JS, accessibility
Reduced motion: no parallax, no fade; the progress bar stays (it is position feedback, not decoration).
No JS: CSS still runs where supported; elsewhere everything is static and visible.
Bar is aria-hidden.
Notes
Our own code: CSS only where supported (the JS returns on line 1).
Uses overflow: clip on the frame so the image's view() timeline tracks the page, not the frame.
Copy-ready snippet
<!-- Scroll scenes (CSS scroll-driven) (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/scroll-scenes/module.css">
<script src="/wbl/scroll-scenes/module.js" defer></script>
<!-- markup: -->
<!-- reading progress bar (once per page, right after <body>) -->
<div class="wbl-progress" aria-hidden="true"></div>
<!-- parallax band: the frame clips, the photo drifts ±7% -->
<figure class="wbl-par" style="aspect-ratio:21/9;margin:0">
<img src="../_demo/img/salon-interior.jpg" width="1400" height="935" alt="The studio floor in afternoon light" loading="lazy">
</figure>
<!-- soft fade-up as it enters (content is never hidden: it starts at 25% and finishes by 70% of its entry) -->
<div data-sd="fade">…</div>
