Lexicon / Scroll behaviour · 3 of 11

16 / Scroll behaviour

Scroll Markers

The row of pictures along the bottom is made by the carousel itself, and follows wherever you are in it.

A journey outward

Nine pictures from the James Webb Space Telescope, in order of how far their light has come. The row along the bottom is the carousel’s own scroll markers: each stop, with its distance.

Jupiter, photographed by the James Webb Space Telescope: The largest planet, in Webb’s infrared: the brighter a cloud, the higher it sits.
01 / 09

Jupiter

The largest planet, in Webb’s infrared: the brighter a cloud, the higher it sits.

43 light-minutes from the Sun

Sunlight takes 43 minutes to reach it.

NASA, ESA, CSA, STScI · public domain · distance: NASA
Rho Ophiuchi, photographed by the James Webb Space Telescope: The nearest place to us where stars are being born.
02 / 09

Rho Ophiuchi

The nearest place to us where stars are being born.

390 light-years

This light set out 390 years ago.

NASA, ESA, CSA, STScI · public domain · distance: NASA, 12 July 2023
Orion Bar, photographed by the James Webb Space Telescope: A ridge of the Orion Nebula, carved by the light of the young stars beside it.
03 / 09

Orion Bar

A ridge of the Orion Nebula, carved by the light of the young stars beside it.

1,350 light-years

This light set out 1,350 years ago.

NASA, ESA, CSA, STScI · public domain · distance: NASA, 26 June 2023
Southern Ring Nebula, photographed by the James Webb Space Telescope: The shells of gas a dying star has been shedding for thousands of years.
04 / 09

Southern Ring Nebula

The shells of gas a dying star has been shedding for thousands of years.

2,500 light-years

This light set out 2,500 years ago.

NASA, ESA, CSA, STScI · public domain · distance: ESA/Webb, 12 July 2022
Pillars of Creation, photographed by the James Webb Space Telescope: Columns of gas and dust in the Eagle Nebula, with new stars forming inside them.
05 / 09

Pillars of Creation

Columns of gas and dust in the Eagle Nebula, with new stars forming inside them.

6,500 light-years

This light set out 6,500 years ago.

NASA, ESA, CSA, STScI · public domain · distance: NASA
Cosmic Cliffs, photographed by the James Webb Space Telescope: The edge of a vast cavity in the Carina Nebula, glittering with newborn stars.
06 / 09

Cosmic Cliffs

The edge of a vast cavity in the Carina Nebula, glittering with newborn stars.

7,600 light-years

This light set out 7,600 years ago.

NASA, ESA, CSA, STScI · public domain · distance: NASA
Cassiopeia A, photographed by the James Webb Space Telescope: What is left of a star that exploded, its shell still expanding into space.
07 / 09

Cassiopeia A

What is left of a star that exploded, its shell still expanding into space.

11,000 light-years

This light set out 11,000 years ago.

NASA, ESA, CSA, STScI · public domain · distance: NASA, 7 April 2023
Cartwheel Galaxy, photographed by the James Webb Space Telescope: A galaxy set into rings by a collision about 400 million years ago.
08 / 09

Cartwheel Galaxy

A galaxy set into rings by a collision about 400 million years ago.

500 million light-years

This light set out 500 million years ago.

NASA, ESA, CSA, STScI · public domain · distance: NASA, 2 August 2022
Webb's First Deep Field, photographed by the James Webb Space Telescope: A cluster of galaxies as it was 4.6 billion years ago, bending the light of galaxies behind it.
09 / 09

Webb's First Deep Field

A cluster of galaxies as it was 4.6 billion years ago, bending the light of galaxies behind it.

13.1 billion years of travel

Light from one galaxy here travelled 13.1 billion years to reach Webb.

NASA, ESA, CSA, STScI · public domain · distance: NASA, 12 July 2022

also called ::scroll-marker · CSS-only carousel dots · scroll-marker-group

The dots are generated by the list and track it for free — including keyboard traversal and focus order, which hand-built dot navigation almost never gets right. Chrome builds the navigation from the scroller itself: one marker per snap stop, a group to hold them, and buttons that page it. No script tracks which stop is showing; :target-current says so.

How it is built.reel { scroll-snap-type: x mandatory; scroll-marker-group: after } .stop::scroll-marker { content: attr(data-far); background: var(--thumb) } .stop::scroll-marker:target-current { /* the stop on screen */ } .reel::scroll-button(right) { content: '→' } /* and (left) */