Infinite Marquee: a logo and text ticker with no gap

How to use it

1. Add the two files

<link rel="stylesheet" href="marquee.css">
<script src="marquee.js" defer></script>

2. Wrap your items in one element

Anything can be an item: pictures, text, links, whole cards.

<div data-marquee>
  <img src="logo-1.svg" alt="Client one" height="32">
  <img src="logo-2.svg" alt="Client two" height="32">
  <img src="logo-3.svg" alt="Client three" height="32">
</div>

That is all. Three logos are enough, even on a very wide screen. The script adds as many copies as the row needs.

Options

<div data-marquee
     data-marquee-speed="40"
     data-marquee-direction="right"
     data-marquee-gap="24"
     data-marquee-fade>
  ...
</div>

Three ready examples

A big text band

<div data-marquee data-marquee-speed="90" data-marquee-gap="28" data-marquee-pause="false">
  <span class="band">Open for projects</span>
  <span class="band">&#10022;</span>
</div>

<style>
.band { font-size: 64px; font-weight: 900; white-space: nowrap; }
</style>

Two rows in opposite directions

<div data-marquee data-marquee-fade> ...logos... </div>
<div data-marquee data-marquee-fade data-marquee-direction="right"> ...logos... </div>

Testimonial cards

Give each card a fixed width, so long and short texts make cards of the same size.

<div data-marquee data-marquee-speed="35" data-marquee-gap="16" data-marquee-fade>
  <div class="quote">Fast and clear. <b>Anna, shop owner</b></div>
  <div class="quote">Our page loads in half the time. <b>Mark, founder</b></div>
</div>

<style>
.quote { width: 300px; padding: 18px; border-radius: 16px; background: #f4f5fb; }
</style>

Use it from JavaScript

var row = Marquee(document.querySelector('#logos'));

row.set('speed', 120);     // change an option
row.pause();               // stop
row.play();                // go on
row.refresh();             // call this after you add or remove items

Marquee.init();            // start marquees that were added to the page later

Why this one stays smooth

• The movement is one CSS animation. JavaScript only measures and copies. The browser moves the row on the graphics card, so it does not stutter when the page is busy.
• The loop is measured, not guessed. The row moves by exactly the width of your items, then starts again. That is why there is no jump, also when the items have different widths.
• It adapts. When the window changes size, a picture finishes loading or a font arrives, the row is measured again.
• It rests off screen. A marquee that nobody sees stops, so several rows on one page cost nothing.

Accessibility

• The copies are hidden from screen readers and from the Tab key. Every item is read once.
• The row pauses while a link inside it has keyboard focus.
• Visitors who switched off animations get a still row that they can swipe sideways.
• Without JavaScript the row is also a normal row you can swipe.

Common questions

My logos have different heights.

Give every logo the same height and let the width follow. For example height="32" on each picture.

The row jumps once after the page loads.

The pictures had no size while loading. Add width and height to every picture, then the row is right from the first moment.

Can the marquee go across the full screen width?

Yes. It fills its parent. Put it outside your centred content column, or give it width: 100vw.

Why not the old marquee tag?

The HTML <marquee> tag is obsolete, leaves a gap between rounds and cannot pause or be read properly by screen readers.

What is in the download

• marquee.css the styles and the animation, about 2 KB
• marquee.js the script that fills the row, about 5 KB with comments
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.