Counter Odometer
Compteur kilométrique : chaque chiffre roule dans sa case jusqu'à sa place quand le compteur apparaît, puis à chaque nouvelle valeur.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Data comprend 28 effets, dont 1 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le HTML se résume à <div class="odom-counter" data-value="12487">12 487</div>. Le script formate la valeur dans la langue de la page (« 12 487 » en français, « 12,487 » en anglais), puis construit une case .odom-cell par chiffre, avec dedans une bande verticale de 0 à 9 (.odom-strip), et une case plus étroite pour chaque séparateur (.odom-sep). Les bandes partent toutes sur 0.
Quand le compteur est visible à moitié (IntersectionObserver, une fois), chaque bande glisse de 10 % de sa hauteur par chiffre, en 0,8 s avec un fort ralenti, la suivante 120 ms après la précédente (premier départ à 300 ms). Écrire ensuite une nouvelle valeur dans data-value fait rouler toutes les cases ensemble vers les nouveaux chiffres ; si le nombre de chiffres change (9 999 → 10 000), les cases sont reconstruites puis roulent depuis 0.
La valeur se règle uniquement par data-value, depuis votre HTML ou votre code ; le composant n'affiche aucun bouton. Chaque compteur est indépendant et rien n'est déclaré sur window.
Accessibilité
- Un nombre, pas cinquante chiffres : les bandes sont masquées (
aria-hidden="true") et un texte invisible.odom-srporte le nombre formaté. Un lecteur d'écran lit « 12 487 », mis à jour à chaque nouvelledata-value. - Contexte : le compteur n'a pas de libellé à lui ; placez à côté un texte (« visiteurs depuis 2019 ») pour qu'il ait un sens.
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est supprimée ; les chiffres sont à leur place dès l'apparition et changent sans rouler. - Annonce des changements : le compteur n'est pas une zone live. Si une nouvelle valeur doit être annoncée, mettez
aria-live="polite"sur un message à vous plutôt que sur le compteur, qui changerait trop souvent.
Compatibilité navigateur
JavaScript sans dépendance (environ 3 Ko), transitions CSS et variables CSS. Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : roulement à l'apparition jusqu'à 12487, compteur placé plus bas qui attend le défilement, nouvelle data-value (5021) sur la 2e copie sans toucher la 1re, texte lu « 12 487 », 390 px, mouvement réduit, aucune erreur. Versions tirées de @mdn/browser-compat-data : IntersectionObserver fixe le minimum.
Sans IntersectionObserver, les chiffres sont posés au chargement. Sans JavaScript, le texte du HTML (« 12 487 ») s'affiche en clair, sans cases.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0241-root">
<div class="odom-counter" data-value="12487">12 487</div>
</div>
<!-- construit par le script dans .odom-counter : -->
<span class="odom-sr">12 487</span>
<span class="odom-row" aria-hidden="true">
<span class="odom-cell"><span class="odom-strip"><span>0</span> … <span>9</span></span></span>
<span class="odom-sep"> </span>
…
</span>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 |
|---|---|---|
Valeur (HTML — data-value sur .odom-counter) |
12487 | Entier positif. À changer plus tard en JavaScript (compteur.dataset.value = 12500) : les cases roulent vers la nouvelle valeur. |
Texte de départ (HTML — contenu de .odom-counter) |
12 487 | Affiché seulement sans JavaScript ; gardez-le égal à data-value. |
Taille des cases (CSS — --odom-w, --odom-h, --odom-size) |
44px · 60px · 1.8rem | Largeur, hauteur de case et taille des chiffres ; réduisez les trois ensemble pour un petit compteur. |
Couleurs (CSS — --odom-color, --odom-cell, --odom-border, --odom-sep) |
#a78bfa · indigo à 15 % · indigo à 30 % · blanc à 30 % | Chiffres, fond et bord des cases, couleur du séparateur. |
Vitesse (CSS — --odom-duration) |
.8s | Durée du roulement de chaque case. Le décalage de 120 ms entre cases au premier affichage est dans le script. |
Séparateur (HTML — attribut lang) |
celui de la page | Espace fine en français, virgule en anglais. Posez lang sur la racine pour en imposer un. |
Fond et hauteur (CSS — --odom-bg, --odom-height) |
#0a0a0f · 300px | Dans une page : --odom-bg:transparent; --odom-height:0px. |
FAQ
data-value à l'entier le plus proche et remplace un nombre négatif par 0, puisque chaque case ne roule que de 0 à 9. Pour une température ou un solde, gardez un affichage en texte simple.Intl.NumberFormat, option minimumIntegerDigits).data-value relance le roulement depuis la position actuelle ; avec une case de 0,8 s, gardez au moins une seconde entre deux valeurs pour que le roulement se termine.
