marquee
An infinitely scrolling content strip (news ticker), added as a progressive enhancement on a static row.
Watch the strips scroll. Hovering a strip pauses it,
tabbing into one pauses it too, and the Pause button parks it
until you press play again. With
prefers-reduced-motion: reduce every strip starts paused.
Default ticker
No options set: scrolls to the left, always, at the default 80 px/s. The link inside shows the focus pause.
+++ Breaking: marquee is back — as a progressive enhancement +++ All components +++
Scrolls right, slower, wider gap
data-marquee-direction="right",
data-marquee-speed="40" and a per-instance
--marquee-gap override.
Slow and steady — the other way round.
Only while it overflows
data-marquee-start="overflow": the strip animates
only while its content is wider than the box. Drag the handle in
the bottom-right corner — make the box wide enough and the
marquee stops and cleans up its clones; narrow it and it starts
again.
Constant pixel speed
data-marquee-speed="80": both strips move at the same
80 px/s even though their text differs in length. Because the
pace is pixels-per-second, the longer line simply takes more time
for a full cycle instead of racing to keep up.
Short line.
A noticeably longer line of ticker text that still travels at exactly the same pixel speed as the short one above.
Countdown inside the ticker
The countdown component is placed inside the marquee.
The marquee clones its track for the seamless loop and
countdown.js mirrors its live values into the (inert)
clones, so every copy stays in sync — the documented
marquee ↔ countdown integration. The seconds tick too:
fixed-width number slots (demo CSS, on top of the countdown's
tabular-nums) keep the track width constant across the
10 → 9 digit change, so the marquee never has
to re-measure while it runs.