A landscape banner image that drifts as you scroll, so page content reads as passing over it. Image only — no overlay text, no heading, no CTA.
image is the mobile crop, roughly 1:2 portrait (e.g. 1200 × 2400). It also
serves as the fallback <img>, so a browser that ignores <picture> gets the
smaller file.
desktop_image is an optional wide crop, roughly 2:1 landscape (e.g.
1920 × 960), served through a <source>. Leave it out and image is used at
every width.
Those are the band’s aspect ratios stretched by $fixed-banner-oversize, not
the band ratios themselves — the image is drawn taller than the band so it has
room to move. A squarer source also works; it just gets cropped top and bottom.
$fixed-banner-oversize currently 1.5. It’s how many times the band’s height
the image is drawn at, and since that surplus is the only room the image has to move,
it is the strength of the effect. 1 stops the drift; past 1.8 the image starts to look soft.
Everything else is derived from it.
animation-range: cover 15% cover 85% in the SCSS and
driftStartsAtScrollProgress / driftEndsAtScrollProgress in
_src/js/tcu-fixed-banner.js must match, or the two drifts won’t agree.
The drift is CSS where animation-timeline: view() exists, and
tcu-fixed-banner.js elsewhere — Firefox, and Safari or iOS below 26. Only one
ever runs.
<div class="tcu-fixed-banner">
<picture>
<source media="(min-width: 48em)" srcset="" />
<img class="tcu-fixed-banner__image" src="https://placehold.co/600x1200" alt="Image description" />
</picture>
</div>