Logo Ticker
Une rangée de cases à logos qui défile lentement en continu ; la case sous la souris ou au focus s'éclaire, et la bande entière s'arrête pour la regarder.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque .lgmq-logo est une case de 120 × 60 px (--lgmq-logo-width, --lgmq-logo-height) au fond légèrement teinté et au bord fin. Vous y mettez ce que vous avez : le nom en texte, une <img> ou un <svg> de logo (limité à 60 % de la hauteur pour garder de l'air), ou une case entière en lien <a class="lgmq-logo">.
La rangée avance à 40 px par seconde (data-speed). Le script recopie la liste autant de fois que la largeur l'exige et règle la durée sur sa longueur. Quand des images de logos arrivent après le premier calcul, la liste s'élargit : le ResizeObserver refait le compte : aucun vide n'apparaît, mais la rangée fait un saut, une fois, à ce moment-là. Donnez une largeur à vos images pour l'éviter. Avant réparation, un trou apparaissait au-delà de 1 000 px de large.
Au survol d'une case, son fond, son bord et son texte s'éclaircissent en 0,3 s, et la bande s'arrête sous la souris pour qu'on puisse la lire ou cliquer. La teinte des cases est une seule variable, --lgmq-tint, écrite en R, G, B : 15, 23, 42 donne des cases ardoise pour un fond clair.
Accessibilité
- Arrêt : bouton Pause à
aria-pressedau bout de la rangée, plus l'arrêt au survol (WCAG 2.2.2). - Logos en image : donnez à chaque
<img>unaltavec le nom de l'entreprise ; seule la liste d'origine est lue, les doubles portentaria-hidden="true"(avant réparation, chaque case était annoncée deux fois). - Cases en lien : avec
<a class="lgmq-logo">, Tab parcourt les cases d'origine uniquement ; la case focalisée s'éclaire comme au survol, la rangée revient au départ, s'immobilise et glisse jusqu'à elle. - Mouvement réduit : avec
prefers-reduced-motion: reduce, la rangée reste immobile et se fait défiler à la main, ou aux flèches après Tab quand elle dépasse (elle reçoit alors le focus clavier) ; l'éclairage des cases reste actif. - Contraste : le texte par défaut (blanc à 60 %) sur la case teintée atteint 7:1 sur fond #0a0a0f ; changez
--lgmq-textsur fond clair.
Compatibilité navigateur
Animation CSS, couleurs en rgba(var(--lgmq-tint), …), 4,5 Ko de JavaScript commenté, aucune dépendance. ResizeObserver (Chrome 64, Firefox 69, Safari 13.1) suit le chargement tardif des images. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rangée pleine à 390, 800 et 1 900 px, éclairage au survol et au focus, 0 erreur.
Sans JavaScript, les cases s'alignent une fois, immobiles, dans une rangée défilable à la main. Dans Safari avant 13.1, une image chargée après coup peut laisser un court vide jusqu'au prochain redimensionnement : donnez une largeur à vos <img>.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<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="Nom du client"></div></li>
<li><a class="lgmq-logo" href="/partenaire">Partenaire</a></li>
</ul>
</div>
</div>
<button type="button" class="lgmq-toggle" aria-pressed="false" aria-label="Pause"></button>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Cases (HTML — .lgmq-logo dans chaque <li>) |
6 cases « Logo N » | Texte, <img>, <svg>, ou case en lien <a>. Écrites une fois. |
--lgmq-logo-width / --lgmq-logo-height |
120px / 60px | Taille d'une case ; auto en largeur pour suivre le contenu. |
--lgmq-tint |
99, 102, 241 | Teinte du fond (10 %, 20 % au survol) et du bord (30 %, 50 % au survol), en R, G, B. |
--lgmq-text / --lgmq-text-hover |
rgba(255, 255, 255, .6) / #fff | Texte d'une case au repos et éclairée. |
data-speed / data-direction |
40 / left | Pixels par seconde et sens de la rangée. |
--lgmq-space |
3rem | Écart entre deux cases. |
--lgmq-height / --lgmq-bg / --lgmq-padding |
180px / #0a0a0f / 1rem 0 | Cadre de démonstration. |
--lgmq-button / --lgmq-button-size |
rgba(255, 255, 255, .8) / 2rem | Bouton Pause. |
FAQ
object-fit: contain). Un logo carré et un logo très large tiennent donc dans la même case ; pour des logos tous très larges, augmentez --lgmq-logo-width..lgmq-logo img { filter: grayscale(1); opacity: .7 } et .lgmq-logo:hover img { filter: none; opacity: 1 } : la case s'éclaire déjà au survol, le logo suit.width et height à vos <img> : la liste a sa largeur définitive dès le départ.
