Scroll photo band

What's included

An “about” section that pins itself to the top of the window while five photo prints come in from the right, one after another, and land at an angle. Two files, a stylesheet and a script — plus the fonts and the five photographs, local to the folder. No dependencies, no build step, no external requests.

The component only takes over the scroll for the length of its animation: the run, --spb-course, is 160 vh and the rail does nothing beyond it. Once the last print has landed, the page carries on.

Features

• Driven by the scroll, with inertia — the band follows the finger, closing on its target exponentially; data-smoothing sets the lag, from 0 to 99.
• Works without JavaScript — the five prints are then already in place, each at its own angle. Nothing is hidden, nothing waits for a script.
• One variable for the scale — every measurement derives from the text size: heading, prints, spacing, button and entrance distances all follow together.
• Seven responsive breakpoints — the ones from the original design, at the same breakpoints, from the 450 px print on a large screen to the 80 px one on a phone.
• Reduced motion respected — no run, no pinning, no entrance. The angles stay: they're a drawing, not a movement.
• The button's label rises on hover — and on keyboard focus, with only one of the two copies read aloud.

Dropping it into a page

Two files to load, then four levels of markup:

<link rel="stylesheet" href="scroll-photo-band.css">
<script src="scroll-photo-band.js" defer></script>
<section class="scroll-photo-band" data-scroll-photo-band>
  <div class="scroll-photo-band__rail">
    <div class="scroll-photo-band__stage">
      <div class="scroll-photo-band__inner">
        …the header, the band of five <li>, the text…
      </div>
    </div>
  </div>
</section>

The four levels aren't decorative: the rail gives the run, the stage pins itself and clips what sticks out, theinner carries the spacing. The full markup is in the README and in the demo.

What you should know

• The band is wider than the window, and that's deliberate. Five prints side by side and centred overflow on both sides from 1440 px onwards. The pinned block clips them itself: nothing escapes, the page doesn't scroll sideways, measured from 320 to 1600 px.
• The scroll belongs to it for a while. The section holds the page for 160 vh. That's what makes the effect, but it's worth knowing before you stack it with another sticky component.
• No inline styles, no inline scripts. The component honours the site's strict security policy and never uses innerHTML: the script writes its positions through the CSSOM, which the policy allows.
• The design comes from elsewhere. The proportions and the animation curve are those of a section from a commercial Webflow template, measured on the live site and in the data of its interactions engine. The code itself is original. Four flaws in the model were fixed along the way — the README puts numbers on them and says how to restore them.