Public / Developer spec
Article: scroll-over images (mockup)
The CNO article "Cold days are coming too late" with two of its photos turned into full-width sections where the image stays still while the page scrolls over it (the effect on The Narwhal).
How the effect works
- Each image is a full-width section (figure.cno-scrollbg, min-height max(100vh, 35rem), broken out of the article column with width 100vw and margin calc(50% - 50vw))
- Inside it, .cno-scrollbg__window is absolutely positioned over the section and clipped with clip: rect(0, auto, auto, 0); the img inside is position: fixed, 100% wide and 100vh high (object-fit: cover), so it is tied to the viewport but only visible through the section: the picture holds still while the page scrolls over it
- No JavaScript. (The Narwhal toggles position: fixed with an IntersectionObserver; this version does not need it. Test on iOS Safari before shipping: fixed layers inside clipped boxes can behave differently there)
- People who prefer reduced motion get a normal scrolling image (@media prefers-reduced-motion switches the img to position: absolute)
Two variants
- Caption box: the photo caption sits on the image in a box (max 22.5rem, rgb(34 34 34 / .82), white 1rem text), left 2.5rem, vertically centred; on phones the box moves to the bottom with 1rem margins
- Pull quote: a centred quote in Noto Serif 600 1.875rem / 2.375rem (1.5rem on phones) with an uppercase attribution line, over a 42% black scrim; the caption becomes a small credit line bottom-left
- Markup for both is in index.html (search cno-scrollbg); styles are in scrollbg.css, built from the site's --cno-* properties
Notes for the developer
- Selectors are prefixed figure.cno-scrollbg so they beat the site's own figure, figcaption and blockquote rules (grey 14px captions, blue blockquote border)
- Use large images (these are 1290 x 860); smaller images will be upscaled to fill the viewport
- Alt text is empty because the images are described by their captions, as in the original article
- Open questions: should this be an editor-selectable image style in the CMS? Should it fall back to a normal image on small screens or slow connections? Pull quotes: written by editors or chosen from the story?
Files and references
| Route | /public/cno-article-parallax (served in place from cno-article-parallax/) |
|---|---|
| Source files | cno-article-parallax/index.htmlcno-article-parallax/scrollbg.css |
| Components used | Typography Colour |
| Design tokens | tokens.css fonts.css tokens.json DESIGN-TOKENS.md Token reference |
| AI files | AGENTS.md components.md design-tokens.md All AI files (.zip) AI files page |
| Claude skill | SKILL.md rules.md check.py starter.html Skill (.zip) |
| Notes |
|