Logo Ticker
A row of logo boxes scrolling slowly and continuously; the box under the mouse or with focus lights up, and the whole band stops so you can look at it.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Gallery has 44 effects, including 6 free. Explore the category →
3 usage examples
How it works
Each .lgmq-logo is a 120 × 60 px box (--lgmq-logo-width, --lgmq-logo-height) with a lightly tinted background and a thin border. Put in it whatever you have: the name as text, a logo <img> or <svg> (capped at 60% of the height to keep some air), or make the whole box a link with <a class="lgmq-logo">.
The row moves at 40 px per second (data-speed). The script copies the list as many times as the width requires and sets the duration from its length. When logo images arrive after the first count, the list grows wider: the ResizeObserver recounts: no gap appears, but the row jumps once at that moment. Give your images a width to avoid it. Before the repair, a hole appeared beyond 1,000 px of width.
On hover, a box's background, border and text brighten in 0.3 s, and the band stops under the mouse so it can be read or clicked. The boxes' hue is a single variable, --lgmq-tint, written as R, G, B: 15, 23, 42 gives slate boxes for a light background.
Accessibility
- Stopping: a Pause button with
aria-pressedat the end of the row, plus the hover stop (WCAG 2.2.2). - Image logos: give each
<img>analtwith the company name; only the original list is read, the duplicates carryaria-hidden="true"(before the repair, every box was announced twice). - Link boxes: with
<a class="lgmq-logo">, Tab visits the original boxes only; the focused box lights up as on hover, the row returns to its start, holds still and slides over to it. - Reduced motion: with
prefers-reduced-motion: reduce, the row stays still and scrolls by hand, or with the arrow keys after Tab when it overflows (it then takes keyboard focus); box highlighting keeps working. - Contrast: the default text (white at 60%) on the tinted box reaches 7:1 over #0a0a0f; change
--lgmq-texton a light background.
Browser compatibility
CSS animation, colours as rgba(var(--lgmq-tint), …), 4.5 KB of commented JavaScript, no dependency. ResizeObserver (Chrome 64, Firefox 69, Safari 13.1) follows images that load late. Measured in Chromium 151, Firefox 153 and WebKit 26.5: full row at 390, 800 and 1,900 px, highlight on hover and focus, 0 errors.
Without JavaScript, the boxes line up once, still, in a row scrollable by hand. In Safari before 13.1, an image loading late may leave a short gap until the next resize: give your <img> elements a width.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0195-root" data-speed="40" data-direction="left">
<div class="lgmq-band">
<div class="lgmq-viewport">
<div class="lgmq-track">
<ul class="lgmq-group" role="list">
<li><div class="lgmq-logo"><img src="logo-client.svg" alt="Client name"></div></li>
<li><a class="lgmq-logo" href="/partner">Partner</a></li>
</ul>
</div>
</div>
<button type="button" class="lgmq-toggle" aria-pressed="false" aria-label="Pause"></button>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Boxes (HTML — .lgmq-logo inside each <li>) |
6 “Logo N” boxes | Text, <img>, <svg>, or a link box <a>. Written once. |
--lgmq-logo-width / --lgmq-logo-height |
120px / 60px | Box size; auto width to follow the content. |
--lgmq-tint |
99, 102, 241 | Hue of the background (10%, 20% on hover) and border (30%, 50% on hover), as R, G, B. |
--lgmq-text / --lgmq-text-hover |
rgba(255, 255, 255, .6) / #fff | Box text at rest and lit. |
data-speed / data-direction |
40 / left | Pixels per second and row direction. |
--lgmq-space |
3rem | Gap between two boxes. |
--lgmq-height / --lgmq-bg / --lgmq-padding |
180px / #0a0a0f / 1rem 0 | Demo frame. |
--lgmq-button / --lgmq-button-size |
rgba(255, 255, 255, .8) / 2rem | Pause button. |
FAQ
object-fit: contain). A square logo and a very wide one therefore fit the same box; for logos that are all very wide, raise --lgmq-logo-width..lgmq-logo img { filter: grayscale(1); opacity: .7 } and .lgmq-logo:hover img { filter: none; opacity: 1 } to your stylesheet: the box already lights up on hover, the logo follows.<img> elements width and height: the list has its final width from the start.
