This CSS-only marquee is made in such a way that you don’t need to repeat the logos in the marquee to get the infinite scrolling effect. Something that is very common in other types of marquee implementations.

Implementation & configuration

This component has a few configuration options that you can set to configure the marquee.

CSS Variables in the HTML

These variables are required to render in the HTML for the marquee to work.

• --num-items: A CSS variable on the marquee element, which needs to be set to the total number of items in the marquee.
• --item-position: Each marquee-item should have a CSS variable with the current position of the item in the marquee. This should start at 1.

CSS Variables in the CSS

In the CSS you find all configurable variables on the .marquee element.

• --speed: Total duration of the marquee animation.
• --item-width: Width of each item in the marquee.
• --item-gap: Spacing between each item in the marquee.

All items should be fixed width

An important condition to make the marquee work without duplicating its contents, is that every marquee item should have the same width. If you’re using this to for example create a text marquee where very item has a different, you need to use a different approach. That approach can be found in this CSS-only text marquee recipe.