Stat Cards
Trois cartes de chiffres qui grossissent l'une après l'autre quand le bloc arrive à l'écran, pendant que chaque valeur compte jusqu'à sa cible.
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
Chaque carte .stcd-card contient une valeur .stcd-value et un libellé .stcd-label. La cible est dans data-target (décimale avec un point : 2.4), l'unité dans data-prefix ou data-suffix (" k", " %", " €"). Le texte écrit dans le HTML sert de valeur finale tant que le script n'a pas tourné.
Au démarrage, le script cache les cartes et remet les valeurs à 0. Quand le bloc est visible à moitié (IntersectionObserver, une seule fois), les cartes grossissent de 80 % à 100 % avec un léger rebond (0,6 s, 0,1 s d'écart entre elles) et chaque valeur compte de 0 à sa cible en 2 s, avec un ralenti à la fin. Le format suit la langue de la page : « 2,4 k » et « 89 % » en français, « 2.4K » et « 89% » en anglais avec le HTML anglais fourni.
Changer plus tard data-target (ou l'unité) relance le comptage, depuis la valeur affichée jusqu'à la nouvelle : utile pour un tableau qui se met à jour ou une bulle qui change de sujet. Chaque racine .fx-0229-root vit à part, rien n'est déclaré sur window.
Accessibilité
- Lecteurs d'écran : la valeur qui défile est masquée (
aria-hidden) et le script place juste après un texte invisible avec la valeur finale et son unité. On entend « 2,4 k Ventes, 89 % Taux, 156 Clients ». Après un changement dedata-target, ce texte est mis à jour aussitôt. - Mouvement réduit : sous
prefers-reduced-motion: reduce, les cartes sont visibles sans grossir et les valeurs finales sont posées d'emblée ; un nouveaudata-targets'affiche lui aussi sans comptage. - Sans script : les cartes restent visibles avec le texte du HTML ; seul le script les masque avant leur apparition.
- Libellés : l'unité est dans la valeur et le mot dans le libellé (« 89 % » puis « Taux »), ce qui se lit dans le bon ordre.
Compatibilité navigateur
JavaScript sans dépendance (environ 3 Ko), animation CSS et variables CSS. Mesuré le 08/11/2026 dans Chromium 151, Firefox 153 et WebKit 26.5 (Playwright) : cartes et comptage à l'apparition, bloc placé plus bas qui attend le défilement, nouveau data-target sur la 2e copie sans toucher la 1re, 390 px, mouvement réduit, formats français et anglais, aucune erreur. Versions tirées de @mdn/browser-compat-data : IntersectionObserver fixe le minimum.
Sans IntersectionObserver, les cartes et les valeurs finales s'affichent tout de suite. Sans JavaScript, les cartes montrent le texte écrit dans le HTML.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0229-root">
<div class="stcd-cards">
<div class="stcd-card">
<div class="stcd-value" data-target="2.4" data-suffix=" k">2,4 k</div>
<div class="stcd-label">Ventes</div>
</div>
<div class="stcd-card">…</div>
<div class="stcd-card">…</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 |
|---|---|---|
Valeur (HTML — data-target sur .stcd-value) |
2.4 · 89 · 156 | Cible du comptage, décimale écrite avec un point. La modifier plus tard en JavaScript relance le comptage depuis la valeur affichée. |
Unité (HTML — data-prefix et data-suffix) |
« k » et « % » en suffixe sur les deux premières | Texte collé avant ou après le nombre : data-prefix="$", data-suffix=" €". Mettez l'espace dans l'attribut si votre langue en veut une. |
Durée (HTML — data-duration sur .stcd-value) |
2000 (millisecondes) | Durée du comptage, réglable valeur par valeur. |
| Nombre de cartes (HTML) | 3 | Ajoutez ou retirez des .stcd-card ; elles passent à la ligne sous la largeur --stcd-max. Le décalage de 0,1 s est prévu pour les 2e et 3e cartes. |
Couleurs (CSS — --stcd-from, --stcd-to, --stcd-card, --stcd-border, --stcd-muted) |
#6366f1 → #d946ef · indigo à 10 % · indigo à 30 % · blanc à 50 % | Dégradé des valeurs, fond et bord des cartes, couleur des libellés. |
Largeur du bloc (CSS — --stcd-max) |
360px | Largeur maximale de la rangée de cartes ; none pour qu'elle occupe toute la colonne. |
Fond et hauteur (CSS — --stcd-bg, --stcd-height) |
#0a0a0f · 300px | Dans une page : --stcd-bg:transparent; --stcd-height:0px. |
FAQ
carte.querySelector('.stcd-value').setAttribute('data-target', '3.1'). Le script la voit et compte depuis l'ancienne. Le texte lu par les lecteurs d'écran change en même temps.data-target change.lang) ; l'unité vient de votre data-suffix. Le HTML anglais fourni utilise data-suffix="K" et "%" sans espace, comme l'usage anglais.
