Animation •
v1.0.0 @synqro/counter
Anime des nombres au scroll. Auto-détecte préfixe, suffixe et séparateurs.
Ajoute sl-counter sur n'importe quel élément qui contient un nombre. Le script détecte le nombre, le préfixe éventuel ($, +) et le suffixe (%, +, EUR), le séparateur (, ) et le nombre de décimales — puis anime quand l'élément entre dans le viewport.
Install • À coller dans Project Settings → Custom Code → Footer
HTML
<!-- [Synqro Labs] Counter -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/counter@1/dist/index.min.js"></script>Installation
- 1 Ajoute le script à ton projet Webflow. Va dans Project Settings → Custom Code → Footer Code et colle le snippet ci-dessus.
- 2 Ajoute les custom attributes sur les éléments concernés dans le Designer Webflow — voir le tableau ci-dessous.
- 3 Publie ton site. Le script s'initialise automatiquement au DOMContentLoaded.
Configuration
Sélectionne l'élément dans le Designer Webflow et ajoute ces custom attributes dans le panneau Element Settings.
| Attribute | Value | Description |
|---|---|---|
| Required | (no value) | Marque l'élément comme compteur. |
| | 2000 | Durée de l'animation en millisecondes. |
| | 300 | Délai avant le démarrage (ms). Utile pour étaler plusieurs compteurs. |
| | linear | ease-out | ease-in | ease-in-out | Fonction d'easing. Par défaut : ease-out. |
| | false | Mets à false pour rejouer l'animation à chaque retour dans le viewport. |
| | 0 | Valeur de départ. Mets une valeur supérieure à la cible pour un décompte. |
| | 0.2 | Portion de l'élément qui doit être visible pour déclencher (0–1). |
| | , / space | Override du séparateur de milliers auto-détecté. |
| | 2 | Override du nombre de décimales auto-détecté. |
| | $ | Override du texte auto-détecté avant le nombre. |
| | % | Override du texte auto-détecté après le nombre. |
Exemples
Basique — auto-détecte tout
HTML
<h2 sl-counter>1,250</h2>
<h2 sl-counter>$45,000+</h2>
<h2 sl-counter>99.9%</h2>Staggered — les nombres apparaissent l'un après l'autre
HTML
<div sl-counter sl-counter-delay="0">100</div>
<div sl-counter sl-counter-delay="200">200</div>
<div sl-counter sl-counter-delay="400">300</div>Décompte
HTML
<div sl-counter sl-counter-start="1000">0</div>Tips
- Bind un champ numérique CMS au contenu texte — l'auto-détection gère n'importe quel format.
- Hooks CSS — sl-counter-active est ajoutée au démarrage, sl-counter-done à la fin.