Marquees have been a part of the web for decades. Sadly we can’t use the <marquee> element anymore nowadays. So we have to recreate our own version of it!

How it works

The CSS based marquee makes the impression of an endlessly looping text, by duplicating its contents, and swapping the animation back to the start exactly halfway.

Because of this it is important to have the content at least duplicated once. And if you’re using the same word multiple times, you should always use an even amount. Otherwise the midpoint of the animation won’t be the same as the start.

Sounds confusing? Make sure to check the tutorial on CSS text marquees where I explain it in more detail.

Configuration

By default the marquee uses two CSS variables, so you can reuse the marquee without changing the CSS.

• --speed - The speed of the marquee. Default is 10s.
• --direction - The direction of the marquee. Default is forwards. Can be set to reverse to make the marquee go the other way.