How to use the logo marquee and ticker generator
- Choose logos or text. List your client names separated by commas. For logos, the code includes an image for each one; for text, it builds a ticker of headlines or keywords.
- Set the motion. Choose how long one loop takes, the gap between items and the direction. Longer loops scroll more gently.
- Add the finishing touches. Pause on hover lets people read or click, faded edges soften where items enter and leave, and greyscale logos keep a mixed set looking consistent until someone hovers.
- Paste it in. Choose your page builder from Paste into and add the code to an HTML or Code widget. Then swap the image paths for your own logo files.
How the infinite scroll works
The list of items is written twice, side by side, inside a track. A CSS animation slides the track left by exactly half its width, then jumps back to the start, at the moment the second copy sits exactly where the first one began, so the loop is seamless. Because only transform changes, the browser can run it smoothly on the graphics card.
No plugin or slider needed
Logo carousels are often built with a slider plugin and a JavaScript library. This version is a few hundred bytes of CSS, works in any page builder’s HTML widget, and doesn’t add another script to your page.
Accessible by default
The second copy of the list is hidden from screen readers so names aren’t read twice. Anyone who has turned on reduced motion sees a still, wrapping row of logos instead of the animation, and pausing on hover helps people who want to read or click an item.
Using it in WordPress, Elementor, Divi, Bricks and Breakdance
Choose your page builder from Paste into, above the code, and Refract rewrites the CSS for it. Elementor Pro and Divi 5 use the selector keyword, Bricks uses %root% and Breakdance uses %%SELECTOR%%, so the effect only applies to the element you paste it into. For the WordPress block editor, free Elementor and Divi 4, you add a CSS class to the element and paste the CSS into your site’s custom CSS. The numbered steps under the code show exactly where to click, and Refract remembers your builder for every tool.
Frequently asked questions
How many logos should I include?
Six to twelve is typical. With fewer, increase the gap so the row is still wider than the screen.
Why is there a jump in my loop?
The two copies must be identical, including the gap after the last item. Keep the generated structure and only change the items inside each list.
Can I make it scroll the other way?
Yes. Choose Left to right under Direction.
Can I use this in Elementor, Divi or Bricks?
Yes. Choose your page builder under Paste into, above the code. The CSS is rewritten for that builder, and the steps underneath tell you exactly where to paste it. WordPress’s block editor and Breakdance are supported too.