Marquee Footer — Free HTML CSS Auto-Scrolling Text Footer Snippet

The oversized, endlessly scrolling word band has become a recognisable closing gesture on agency and product sites — it's motion with no functional job beyond signalling "this brand has energy," which makes it a good fit specifically for a footer, where there's no content hierarchy left to protect. This snippet builds the effect the same way the site's standalone Marquee does, scaled up to footer-headline size and paired with a slim, conventional link row underneath.

Duplicate the content once, animate to exactly -50%

The core trick is deceptively simple: .mqf-track contains the same sequence of words twice in a row, laid out with display: flex; width: max-content so the track is exactly twice as wide as one copy of the content. A @keyframes animation moves it from translateX(0) to translateX(-50%) — precisely one copy's width — over 22 seconds, linear. Because the second copy is identical to the first, the instant the animation resets from -50% back to 0%, the visual is indistinguishable from where it started; there's no visible seam or jump, just an apparently infinite loop built from a track that's secretly only two repeats long.

Why `width: max-content` isn't optional

Without width: max-content, the flex track would shrink or grow to fit its parent's width rather than its content's natural width, which breaks the "-50% equals exactly one copy" math the whole animation depends on. max-content forces the track to be exactly as wide as its content demands, so the halfway point of the animation always lands exactly where the first copy ends and the second begins.

Masking the hard edges

-webkit-mask / mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) fades the marquee's opacity to zero at both edges of its container. Without this, words would appear to be cut off mid-character at the left and right boundaries as they scroll past — the mask gives the illusion that text is fading into the page edges rather than being clipped by a hard rectangle.

Pausing on hover, and turning it off entirely

.mqf:hover .mqf-track { animation-play-state: paused } freezes the scroll the moment a cursor enters the footer, which matters for a footer specifically because it often contains real, clickable content (the link row below) that a user might be trying to read or interact with while the marquee is technically still "behind" their attention. A separate prefers-reduced-motion: reduce query removes the animation and switches the track to overflow-x: auto, so motion-sensitive users get a manually scrollable strip instead of continuous, uncontrollable movement.