vocab.design

motion

Marquee

also called ticker (community), scrolling text (community), logo cloud scroller (community), news ticker (community), infinite scroller (community)

Text or logos that scroll continuously across a strip, either as a decorative ticker or because a label is too long for its box.

A marquee moves its content past a fixed window instead of fitting the content to the window. Two quite different jobs go by the name. One is editorial: a ticker of prices, scores, or headlines, or a strip of client logos that a marketing page runs as a texture rather than as a list anyone reads item by item. The other is utilitarian: a track title or a file name too long for the row it lives in, set moving so the end of it can be seen at all. The first is decoration and should be treated as such. The second is a fallback for a layout that ran out of room, and static truncation with the full text available on demand is almost always the better answer.

The name comes from the HTML element. Internet Explorer 2 shipped <marquee> in 1995, Netscape answered with <blink>, and between them they became the shorthand for everything wrong with the early web. <marquee> was never in a real HTML specification until the WHATWG documented it in the obsolete-features section so that browsers could keep parsing the pages that used it. Browsers still render it and the specification still tells authors not to use it. It died for good reasons: motion nobody asked for, with no way to stop it, attached to content that could only be read by waiting for it to come back around.

The modern version is CSS, and the whole craft of it is the seam. Duplicate the content, translate the track by exactly half its own width, and loop, which lands the second copy where the first began. The join is only invisible if the gap after the last item equals the gaps between them, so the trailing gap has to belong to the group being repeated rather than sit between the two groups. The duplicate is decorative by definition and belongs behind aria-hidden, or a screen reader reads the whole ticker twice. Prefer transforms to animating left or scroll position, since a transform is the one property a compositor can run without laying the page out again on every frame.

Then make it stoppable. WCAG 2.2.2 is unambiguous: anything that moves automatically for more than five seconds needs a mechanism to pause it, and for a marquee the cheap version is pausing on hover and on focus, which readers reach for instinctively the moment they want to read a row. Honour prefers-reduced-motion by holding the strip still. Never put information that exists nowhere else in a moving strip, and resist the temptation to make it a live region: aria-live on a ticker turns a decorative loop into an interruption every few seconds, which is how a well-meant announcement becomes the reason someone leaves.

Which word?

If you wantsay
content is wider than its box and must still be readmarquee
a set of items shown a few at a time in a rowcarousel
text has to fit a box it does not fittruncation

Related

See also: Reduced motion · Pause, stop, hide · Logo cloud · Yo-yo loop

Sources