Ruled Grid
Grille de huit chiffres-clés séparés par des traits qui vivent dans les gouttières ; chaque chiffre monte de zéro à sa valeur quand il arrive à l'écran.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Les séparateurs ne sont ni des bordures de cellules ni des éléments en plus. Sur Chrome et Edge 149 et suivants, la grille utilise les règles natives de gouttière (CSS Gap Decorations) : column-rule en tirets, row-rule en trait plein et rule-inset: -4px qui les fait dépasser de 4 px aux bords de la grille. Ailleurs, un repli dessine les mêmes traits avec le pseudo-élément .rgd-grid::before : quatre images de fond de 1 px placées au milieu exact des gouttières, calculé à partir de l'espacement --gap. Le bloc @supports (row-rule: 1px solid red) choisit entre les deux.
La racine est un conteneur (container: rgd / inline-size) : au-delà de 520 px la grille fait 4 colonnes sur 2 lignes, en dessous 2 colonnes sur 4 lignes, avec les traits du repli recalculés pour cette disposition. Les colonnes en minmax(0, 1fr) ne poussent jamais la page en largeur.
Le script crée un IntersectionObserver par racine. Dès qu'un chiffre est visible à 40 %, il compte de 0 à la valeur de data-final en 0,9 s (ralenti en fin de course), en gardant préfixe, décimales et unité (« 3,2 % », « +18 % », « 27 k€ »), puis affiche le texte final exact. Chaque chiffre ne compte qu'une fois. Au survol, une cellule se teinte et monte de 2 px ; la pastille d'en-tête pulse toutes les 2,2 s.
Accessibilité
- Valeurs dans le HTML : chaque chiffre est écrit en entier dans la page (et dans
data-final) ; sans script ou en mouvement réduit, il s'affiche directement, sans compteur. - Mouvement réduit : avec
prefers-reduced-motion: reduce, pas de comptage, pas de pulsation de la pastille, pas de déplacement au survol. - Survol seulement décoratif : le surlignage d'une cellule aide à suivre une ligne à la souris mais n'apporte aucune information ; les cellules ne sont pas focalisables, rien n'est à atteindre au clavier.
- Structure :
<section aria-label>, titre<h3>, valeur en<strong>suivie de son libellé ; renseignez unaria-labelqui décrit votre propre tableau. - Compteur et lecteur d'écran : pendant les 0,9 s du comptage, le texte change ; un lecteur qui lirait à ce moment entendrait une valeur intermédiaire, d'où l'intérêt de laisser le mouvement réduit couper le comptage.
Compatibilité navigateur
Règles natives : row-rule et rule-inset à partir de Chrome et Edge 149, ni Firefox ni Safari (d'après @mdn/browser-compat-data 8.1.8). Requêtes de conteneur : Chrome 105, Firefox 110, Safari 16. Mesuré dans Chromium 151 (règles natives), Firefox 153 et WebKit 26.5 (repli) : traits au milieu des gouttières en 4×2 et 2×4, page de 390 px sans défilement horizontal, compteurs de deux copies indépendants.
Sans @container, la grille garde 4 colonnes même étroite : rien ne déborde de la page mais les libellés serrent. Sans IntersectionObserver, les chiffres comptent dès le chargement. Sans JavaScript, ils s'affichent directement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0820-root">
<section class="rgd-panel" aria-label="…">
<header class="rgd-head">
<h3>…</h3>
<span class="rgd-badge">…</span>
</header>
<div class="rgd-grid">
<div class="rgd-cell">
<strong class="rgd-num" data-final="12 480">12 480</strong>
<span class="rgd-key">…</span>
</div>
<!-- 8 cellules ; rgd-cell--hot sur celle à faire ressortir -->
</div>
</section>
</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 |
|---|---|---|
Traits natifs (CSS — column-rule, row-rule, rule-inset dans @supports) |
Tirets violets à 55 %, trait plein à 35 %, 4 px de dépassement aux bords | Passez column-rule en solid pour un tableau plus strict, ou rule-inset: 8px pour des traits qui s'arrêtent 8 px avant les bords de la grille. |
Traits de repli (CSS — .rgd-grid::before, deux jeux : 4×2 et 2×4) |
Mêmes couleurs, 1 px | Changez les couleurs dans les deux jeux en même temps que les règles natives pour un rendu identique partout. |
Espacement (CSS — --gap sur .rgd-grid) |
22 px | Le repli recalcule la position des traits à partir de cette variable : modifiez-la, pas gap directement. |
Seuil 2 colonnes (CSS — @container rgd (max-width: 519.98px)) |
Sous 520 px de racine | Avec des libellés courts, descendez à 440 px pour garder 4 colonnes plus longtemps. |
Valeurs (HTML — texte et data-final de .rgd-num) |
8 chiffres d'exemple | Écrivez la même valeur aux deux endroits ; le compteur garde ce qui précède et suit le nombre (« +18 % », « 27 k€ », « 4,8/5 »). |
Durée et seuil du comptage (JS — 900 et threshold: .4) |
0,9 s, à 40 % visible | Allongez à 1,5 s pour des chiffres mis en scène ; montez le seuil à 0,8 pour ne compter qu'une fois la grille bien en vue. |
Cellule mise en avant (HTML — classe rgd-cell--hot) |
MRR en vert #22ffaa |
Placez-la sur le chiffre principal de votre page, ou retirez-la pour une grille neutre. |
Pastille (HTML — .rgd-badge) |
« Live », pulsation de 2,2 s | Remplacez le texte par une année, un statut ou un nom de produit ; supprimez animation si la pastille ne signale rien en direct. |
FAQ
data-final ; le comptage animé ne se rejoue pas, la nouvelle valeur s'affiche directement.
