← Back to gallery
CSS

Axis-aware Scroll-linked Marquee Ticker

A scroll-linked marquee ticker pattern that documents axis ownership, duplicate-track accessibility, and a static reduced-motion state.

Duration
9s
Resolution
1440×900
Format
CSS
scroll-linkedmarqueetickeraxis-awareduplicate-track

Scroll-linked / Axis-aware Ticker

Axis-aware Scroll-linked Marquee Ticker

A duplicated ticker rail is tied to a known scroll axis, with an accessible duplicate layer and a reduced-motion static state.

inline axis scroll-linked ticker - 8.0s cycle · 1.00 intensity
motionaxisscrollinline

Horizontal scroller

Inline Axis

A ticker reads the inline axis so it does not silently bind to the wrong scroll container.

The visual duplicate is aria-hidden and the readable copy appears once.

  • scroll()
  • x-axis
  • marquee
motionaxisscrollreverse

Opposite direction

Reverse Rail

A reverse rail demonstrates direction without changing the semantic content order.

The duplicate track creates a seamless loop while source content remains single.

  • reverse
  • duplicate rail
  • root-scroll
motionaxisscrollnested

Container-specific axis

Nested Scroller

A nested ticker names its intended scroller to avoid root/self confusion.

The demo documents which scroller owns the timeline.

  • nearest
  • nested-scroll
  • axis

Ticker inspector

Inline Axis

motionaxisscrollinline
Motion contract
The visual duplicate is aria-hidden and the readable copy appears once.
Accessibility
Reduced motion keeps the ticker static and prevents duplicate announcements.

Scroll-linked animation only works when the selected scroller has real overflow on that axis.

css
.ticker {
  overflow: hidden;
}

.ticker__track {
  display: flex;
  animation: tickerShift 8.00s linear infinite;
}

.ticker__duplicate {
  aria-hidden: true;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; transform: none; }
}