Live Ticker
Bandeau d'indicateurs qui défile sans fin en recyclant ses éléments, se tire à la main avec inertie et se met à jour avec un flash vert ou rouge.
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
Vous écrivez vos éléments dans .ltk-track : un .ltk-item par indicateur, avec un .ltk-label, une .ltk-value et, si vous voulez une variation, l'attribut data-delta (le script crée la pastille « ▲ +4.20% » verte, rouge ou neutre). Le script ajoute les séparateurs, puis des copies masquées de la liste tant que la piste ne couvre pas la largeur de la bande plus deux fois l'élément le plus large : la bande reste pleine même dans une zone de 1 700 px.
La piste recule de 60 px/s (calculé sur le temps écoulé). Dès qu'un élément est entièrement sorti à gauche, il est déplacé en fin de piste et le décalage est compensé de sa largeur, mesurée à ce moment-là : aucun saut, même si une valeur a changé de longueur entre-temps. Tirée vers la droite, la piste fait l'inverse et ramène le dernier élément en tête.
Survol de la bande, focus clavier dans la bande ou bouton Pause : le défilement s'arrête. On peut saisir la bande à la souris ou au doigt ; au lâcher, elle garde l'élan du geste puis reprend sa vitesse. Chaque racine expose racine.ltkTicker : push({label, value, delta}) met à jour toutes les copies d'un indicateur avec un flash de 0,55 s (ou l'ajoute s'il n'existe pas), pause(), play() et setSpeed(px). Le cadre fourni (en-tête et trois cartes) est un simple habillage HTML, sans script.
Accessibilité
- Pas d'annonces en boucle : la bande a le rôle
marqueeet unaria-label, sansaria-live; les mises à jour ne sont pas lues automatiquement. Seuls vos éléments d'origine sont lus : les copies portentaria-hidden="true", leurs lienstabindex="-1". - Pause : survol, focus clavier sur un lien de la bande ou bouton Pause (
aria-pressed) arrêtent le défilement (WCAG 2.2.2). - Mouvement réduit : sous
prefers-reduced-motion: reduce, ni copies ni mouvement ni flash ; la piste devient une liste défilable au doigt, à la molette ou au clavier (tabindex="0"quand elle dépasse).push()continue de mettre les valeurs à jour. - Liens : un glisser de plus de 5 px n'ouvre pas le lien sous le pointeur ; un simple clic l'ouvre.
touch-action: pan-ylaisse la page défiler au doigt.
Compatibilité navigateur
Pointer Events avec setPointerCapture, IntersectionObserver et ResizeObserver (testés avant usage), mask-image pour le fondu des bords. Mesuré le 08/11/2026 dans Chromium, Firefox et le WebKit de Playwright : 60 px/s, arrêt au survol, au focus et au bouton, deux copies indépendantes, bande pleine à 1 700 px, mouvement réduit, glisser au doigt à 390 px.
Sans JavaScript, la liste s'affiche immobile, sans séparateurs ni pastilles de variation. Sans mask-image, deux dégradés posés sur les bords prennent le relais.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0834-root" data-ltk-speed="60" data-ltk-unit="%" data-ltk-decimals="2">
<div class="ltk-demo-panel">
<div class="ltk-panel-header">
<span class="ltk-panel-title">…</span>
<button class="ltk-btn-pause" type="button" aria-label="…" aria-pressed="false">⏸</button>
</div>
<div class="ltk-root" role="marquee" aria-label="…">
<div class="ltk-track">
<span class="ltk-item" data-delta="4.2"><span class="ltk-label">…</span><span class="ltk-value">…</span></span>
</div>
</div>
<div class="ltk-panel-stats">
<div class="ltk-stat-card">…</div>
</div>
</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 |
|---|---|---|
Éléments (HTML — .ltk-item dans .ltk-track) |
8 indicateurs de boutique fictifs | Un .ltk-label et une .ltk-value par élément ; vous pouvez y mettre un lien ou une icône. |
Variation (HTML — data-delta sur .ltk-item) |
Absent : pas de pastille | Nombre positif (▲ vert), négatif (▼ rouge) ou 0 (— gris). |
Unité et décimales (HTML — data-ltk-unit, data-ltk-decimals sur la racine) |
« % » et 2 | Ex. data-ltk-unit=" pt" data-ltk-decimals="0" affiche « ▲ +2 pt ». |
Vitesse (HTML — data-ltk-speed) |
60 (px/s) | De 0 à 600 ; modifiable ensuite avec racine.ltkTicker.setSpeed(px). |
Mise à jour (JS — racine.ltkTicker.push({label, value, delta})) |
Aucune mise à jour automatique | Cherche l'élément par son data-label (repris du texte du libellé s'il manque), change la valeur et la pastille avec un flash ; ajoute l'élément s'il est nouveau. |
Habillage (HTML — .ltk-demo-panel, .ltk-panel-header, .ltk-panel-stats) |
En-tête « Boutique · Aujourd'hui » et trois cartes | Purement décoratif : retirez-le pour ne garder que .ltk-root et le bouton Pause dans la racine. |
Couleurs (CSS — .ltk-label, .ltk-value, .ltk-delta--up / --down) |
#9696aa, #d4d4d8, #4ade80 / #f87171 | Couleurs des libellés, valeurs et pastilles ; fond de bande sur .ltk-root (#0d0d14). |
FAQ
push(), par exemple après une requête à votre propre serveur.document.querySelector('.fx-0834-root')) puis, dans votre setInterval, appelez racine.ltkTicker.push({label: 'Commandes', value: '318', delta: 1.9}). Le libellé doit correspondre au data-label ou au texte du .ltk-label.
