← Back to gallery
CSS

Marquee / Ticker / Infinite Scroll

A project-authored CSS marquee showcase where duplicated rails, white-space: nowrap semantics, overflow: hidden viewport clipping, and translateX() keyframes keep ticker labels on a single unbroken line while moving by one authored track width, then switch to a static reduced-motion fallback and manual pause affordances when less movement is requested.

marqueetickerinfinite-scrolltranslateXnowrapsingle-lineoverflowviewport-clippingreduced-motionaccessibilitykeyframes

Marquee / ticker / infinite scroll

Marquee ticker infinite scroll

Reimplements looping marquee motion with authored CSS keyframes, duplicated tracks, white-space: nowrap semantics, overflow: hidden viewport clipping, and a translateX() loop offset so ticker rails stay on one unbroken line while traveling one authored track width without relying on the obsolete marquee element.

product launch ticker track active — fast repeat + dense messaging

Compact status chips + fast release rail

Product Launch Ticker

Product Launch Ticker keeps compact status pills in constant motion so shipping updates, beta invites, and launch notes read like a live command ribbon.

marqueeDrift 11.5s linear 0s infinite

  • release feed
  • dense labels
  • dashboard header

Slower top-story drift + roomy spacing

Editorial Headline Ribbon

Editorial Headline Ribbon slows the drift and increases spacing so story promos read like a calm top-of-page ribbon instead of a busy notification strip.

17.5s linear 0s infinite marqueeDrift

  • headline ribbon
  • news rail
  • homepage hero

Balanced cadence + mixed-length updates

Community Pulse Rail

Community Pulse Rail balances medium-length labels and moderate spacing so event reminders, shout-outs, and workshop prompts stay legible without slowing the whole page.

marqueeDrift 14s linear 0s infinite

  • community feed
  • event rail
  • supporting motion

Ticker inspector

Product Launch Ticker

Animation
marqueeDrift 11.5s linear 0s infinite
Cadence
fast repeat + dense messaging
Spacing
tight 1rem gaps
Track structure
Single-line inline-flex rail with duplicated labels, overflow clipping, and authored gaps.
Viewport clipping
overflow: hidden trims the off-screen copy inside a rounded viewport while the duplicated rail keeps moving underneath the fade edges.
white-space rule
nowrap keeps every ticker label on one unbroken line before the duplicated track loops.
translateX() offset
translateX(calc(-50% - (var(--marquee-gap) / 2)))

This version uses a shorter duration and tighter spacing so brief labels keep circulating without leaving the track feeling empty.