Der Ausgefallene Zahlen Bric verleiht Ihrer Website einen Hauch von Dynamik und Eleganz, indem es Zahlen animiert, die auf- oder abwärts zählen, um die Besucher sofort anzusprechen.
Anwendung
Sobald du hast installiert den Bric mit den ausgefallenen Zahlen, stecken Sie den Bric einfach in Ihren Blocs Projekt mit der Bric Bar.
Solange das Fancy Numbers Bric auf einer Seite vorhanden ist, können Sie alle vordefinierten Elemente verwenden und kombinieren. Unterricht und benutzerdefinierte Datenattribute um die Zahlen innerhalb eines Textes zu animieren Bric.
Für optimale Ergebnisse empfehlen wir den numerischen Wert in einen Bereich einschließen und die Anwendung der Fancy Number-Klassen direkt zur Spannweite, anstatt des übergeordneten Textes Bric. Dies trägt dazu bei, die Textformatierung beizubehalten.
Wenn Sie Ihre Website in der Vorschau anzeigen oder veröffentlichen, kümmert sich Fancy Numbers um den Rest.
Unterstützte Klassen
- fn-up Animiert eine Zahl von 0 nach oben bis zu ihrem Zielwert.
- fn-down Animiert eine Zahl von einem höheren Wert (standardmäßig das 10-fache des Zielwerts) nach unten zu ihrem Zielwert.
- fn-speed-s Langsame Animationsgeschwindigkeit (≈ 6 s). Ideal für größere Werte oder zur Hervorhebung dramatischer Effekte.
- fn-Geschwindigkeit-f Schnelle Animationsgeschwindigkeit (≈ 800 ms). Perfekt für kleine Zahlen oder schnelle Statusanzeigen.
Achten Sie darauf, entweder .fn-up or .fn-down Wenden Sie nicht beide Richtungsklassen auf ein einzelnes Element an.
Unterstützte Datenattribute
- Datenfunktionsdauer Legen Sie eine benutzerdefinierte Animationslänge in Millisekunden fest.
- data-fn-from Definiere einen benutzerdefinierten Startwert.
- data-fn-to Definiere einen benutzerdefinierten Endwert.
- data-fn-replay Die Animation wird jedes Mal wiederholt, wenn das Element in den sichtbaren Bereich scrollt. Zahlen werden standardmäßig nur einmal animiert. Unterstützte Werte was immer dies auch sein sollte. / falsch.
Mehr über die Verwendung benutzerdefinierter Datenattribute erfahren Sie in Blocs werden auf dieser Seite erläutert.
Unterstützte Zahlenformate
Fancy Numbers erkennt und speichert automatisch:
- Währungssymbole $, €, £, ¥, ₩, ₹, ₽, ₺, ₦, ₫
- Einheitensymbole %, px, em, kg, km, m, cm, mi, s, ms, °C, °F, h, hrs
- Zeichen +, -
- Abkürzungen K, M, B, T
- Kommas und Dezimalzahlen 1,000, 10.5, 2,500.75
Herunterladen
Fancy Numbers kann kostenlos heruntergeladen werden unter Blocs Shop.