Infinite Marquee (Accessible)

Officialby Cube Burst Studios

A seamless scrolling ticker that pauses on hover/focus and stops for reduced-motion users. Works with text, chips or logos.

⬇ Download ZIP 1.8 KB

Category: Web Dev
File: infinite-marquee.zip
Size: 1.8 KB
Downloads: 0
Added: 16 Oct 2026
Licence: Free to use, no credit needed (CC0)

#css #marquee #ticker #animation #accessibility

⚑ Report this

A seamless scrolling ticker that pauses on hover/focus and stops for reduced-motion users. Works with text, chips or logos.

The download has a working demo (index.html) plus the files to copy. The key file is shown below with a Copy button.

component.css

/* Infinite Marquee · Cube Burst Studios · CC0
   Duplicate your items once inside .marquee__track (the copy gets aria-hidden="true") and it loops seamlessly.
   Pauses on hover/focus; stops entirely for people who prefer reduced motion. Speed: --duration. */
.marquee { overflow: hidden; --duration: 24s; --gap: 48px;
	mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--gap); width: max-content; animation: marquee var(--duration) linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; gap: var(--gap); align-items: center; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; flex-wrap: wrap; width: auto; }
	.marquee__group[aria-hidden="true"] { display: none; }
}