La Chiffres fantaisie Bric apporte une touche de mouvement et de raffinement à votre site, en animant des chiffres qui montent ou descendent pour capter instantanément l'attention des visiteurs.
Comment l'utiliser ?
Une fois que vous avez Installé Le Bric Fancy Numbers, insérez simplement le Bric dans votre Blocs projet utilisant le Bric Bar.
Tant que le bloc Fancy Numbers est présent sur une page, vous pouvez utiliser et combiner n'importe lequel des éléments prédéfinis. les classes et attributs de données personnalisés animer les chiffres dans un texte Bric.
Pour de meilleurs résultats, nous recommandons enveloppant la valeur numérique dans une span et en appliquant les classes de nombres fantaisie directement à l'étendue, plutôt que le texte parent Bric. Cela permet de conserver la mise en forme du style de texte.
Lorsque vous prévisualisez ou publiez votre site web, Fancy Numbers s'occupe du reste.
Classes prises en charge
- fn-up Anime un nombre de 0 à sa valeur cible.
- fn-bas Anime un nombre vers le bas à partir d'une valeur plus élevée (par défaut 10 fois la valeur cible) jusqu'à sa valeur cible.
- fn-vitesse-s Vitesse d'animation lente (≈ 6 s). Idéal pour les grandes valeurs ou un effet dramatique.
- fn-vitesse-f Vitesse d'animation rapide (≈ 800 ms). Parfait pour les petits nombres ou les révélations rapides de statistiques.
Veillez à utiliser l'un ou l'autre .fn-up or .fn-bas N'appliquez pas les deux classes de direction à un même élément.
Attributs de données pris en charge
- durée de la fonction de données Définissez une durée d'animation personnalisée en millisecondes.
- data-fn-from Définissez une valeur de départ personnalisée.
- données-fn-à Définissez une valeur finale personnalisée.
- relecture de la fonction de données Rejoue l'animation à chaque fois que l'élément apparaît à l'écran. Par défaut, les nombres ne sont animés qu'une seule fois. Valeurs prises en charge oui / non.
Vous trouverez plus d'informations sur l'utilisation des attributs de données personnalisés dans Blocs ici.
Formats de nombres pris en charge
Fancy Numbers détecte et préserve automatiquement :
- Symboles monétaires $, €, £, ¥, ₩, ₹, ₽, ₺, ₦, ₫
- Symboles d'unité %, px, em, kg, km, m, cm, mi, s, ms, °C, °F, h, hrs
- Caractères de signalisation +, -
- Abréviations K, M, B, T
- Virgules et décimales 1,000, 10.5, 2,500.75
Télécharger
Fancy Numbers est disponible en téléchargement gratuit sur le site Blocs Stockage.