Number Count
Zahlen zählen hoch, sobald sie ins Bild kommen — mit genau der Schreibweise, die im Designer schon dasteht.
Der Zielwert wird nicht eingestellt, sondern gelesen. Was im Designer als Text steht — 1.234, 1,234, 1'234 oder 1 234, mit „€ “ davor oder „ Mio.“ dahinter — wird zerlegt: die Zahl für die Animation, alles andere als Form, die am Ende wieder genauso dasteht. Deshalb entspricht der Endzustand exakt dem Designer-Text, und ändert sich die Zahl im CMS, ändert sich der Zähler mit.
- LesenDer Textinhalt wird geparst: Tausendertrenner, Dezimaltrenner, Prefix und Suffix werden erkannt und bleiben erhalten.
- WartenEin IntersectionObserver wartet, bis genug von der Zahl im Bild ist — ab Werk 40 Prozent, auf Wunsch ein eigener Wert. Einmalig, sofern nicht wiederholt werden soll.
- ZählenDie Animation läuft über requestAnimationFrame mit easeOutCubic; formatiert wird über Intl.NumberFormat mit der Sprache aus <html lang>.
Dieses <script> in den Custom Code deines Projekts
Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Head Code. Das Skript lädt nebenher und hält das Rendern nicht auf; es läuft erst, wenn die Seite steht, und tut nichts, solange kein fpu-Attribut da ist.
<!-- FlowPowerUser · Number Count -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/number-count.js"></script>Die Zahl markieren
Schreib die Zahl so in den Designer, wie sie am Ende dastehen soll — mit Trennzeichen, mit Prozentzeichen, mit allem, was dazugehört. Dann setz das Attribut darauf. Der Zielwert wird aus genau diesem Text gelesen; ein eigener Wert ist nur nötig, wenn er vom Text abweichen soll.
Auf die Zahlnur Text darin
Text Block fpu-count-element="number"
Inhalt: 1.250 +Veröffentlichen und nachsehen
Seite veröffentlichen und so weit scrollen, dass die Zahl ins Bild kommt. Zwei Dinge müssen stimmen: Sie beginnt zu zählen, sobald sie sichtbar ist, und am Ende steht dort wieder genau der Text aus dem Designer — dieselben Trennzeichen, dieselben Nachkommastellen, derselbe Vor- und Nachtext. Bleibt sie stehen, hilft fpu-count-logging="true": das schreibt beim Start eine Zeile in die Browser-Konsole.
OptionalMehrere Zahlen gestaffelt startenStandard: 150 ms Versatz
Stehen mehrere Kennzahlen nebeneinander, sollen sie selten alle gleichzeitig losspringen. Setz das Attribut auf den umgebenden Container: Er startet alle enthaltenen Zähler gestaffelt, sobald er selbst sichtbar wird, und vererbt seine Optionen an die Mitglieder — was du am Container einstellst, gilt für alle Zahlen darin.
Auf den Container
150Versatz in Millisekunden zwischen zwei Zählern der Gruppe. Gehört auf das group-Element.OptionalWerte, Dauer und WiederholungStandard: 0 → Text, 2000 ms
Ohne Angabe zählt die Zahl von 0 auf den Wert, der im Text steht, und braucht dafür zwei Sekunden. Diese vier Attribute setzen jeden Teil davon einzeln. Ist der Startwert größer als der Zielwert, zählt die Zahl herunter statt hoch.
Auf die Zahl oder die Gruppe
an der Gruppe gilt es für alleWert aus dem TextZielwert-Override, falls er nicht aus dem Textinhalt kommen soll. Punkt als Dezimaltrenner.0Startwert. Liegt er über dem Zielwert, wird heruntergezählt.2000Animationsdauer in Millisekunden.falseZählt bei jedem Viewport-Eintritt neu. Ohne dieses Attribut läuft die Animation genau einmal.OptionalWann gezählt wirdStandard: 40 % des Elements
Ohne Angabe beginnt die Zahl zu zählen, sobald 40 Prozent von ihr im Bild sind. Soll das früher oder später passieren, setzt dieses Attribut den Punkt selbst — entweder als Anteil des Elements oder als feste Strecke. Bei „px“, „vh“ und „vw“ zählt, wie viel vom Element zu sehen ist; ist das Element selbst niedriger als der geforderte Wert, genügt es vollständig, damit ein kleiner Zähler nicht auf eine Strecke wartet, die er nie erreichen kann.
Auf die Zahl oder die Gruppe
bei Gruppen zählt der Container40%Ab wann gezählt wird. „40 %“ und „0.4“ meinen dasselbe: den Anteil des Elements. „120px“, „10vh“ und „10vw“ geben stattdessen an, wie viel vom Element zu sehen sein muss; vh und vw beziehen sich auf das aktuelle Fenster und werden beim Drehen oder Ziehen neu berechnet. Eine Zahl ohne Einheit gilt nur zwischen 0 und 1 — alles darüber ist mehrdeutig und wird mit einem Hinweis in der Konsole abgelehnt.OptionalTausendertrenner und KonsoleTrenner sonst wie im Text
Der Tausendertrenner kommt normalerweise aus dem Originaltext. Soll er ein anderer sein, setzt dieses Attribut ihn — entweder als Schlüsselwort oder wörtlich als das Zeichen, das dastehen soll.
Auf die Zahl oder die Gruppe
wie im OriginaltextTausendertrenner-Override. „none“ gruppiert gar nicht; „space“, „nbsp“, „thin“ und „apostrophe“ sind Schlüsselwörter. Jeder andere Wert wird wörtlich als Trennzeichen übernommen.falseSchreibt beim Start eine Zeile in die Browser-Konsole.OptionalStandards für das ganze Projektdas Attribut gewinnt immer
Wenn jede Zahl im Projekt dieselbe Dauer oder denselben Trenner haben soll, lässt sich das einmal zentral setzen, statt es an jedes Element zu schreiben. Ein Attribut am Element sticht diesen Wert immer.
<script>
window.fpuNumberCountConfig = {
duration: 2000,
stagger: 150,
repeat: false,
separator: ".",
threshold: "40%",
logging: false,
};
</script>Zusätzliche Features
- Wer weniger Bewegung eingestellt hat, bekommt keine
- Steht im Betriebssystem „Bewegung reduzieren“, wird nicht gezählt: Die Zahl steht sofort auf ihrem Endwert. Der Inhalt ist damit von der ersten Sekunde an vollständig lesbar.
- Hohe Elemente werden anders gemessen
- Ein Element, das höher ist als der Bildschirmausschnitt, erreicht einen Anteil von 40 Prozent nie — es passt schlicht nicht hinein. Dort entscheidet deshalb der sichtbare Anteil am Fenster statt der Anteil am Element, damit auch große Zahlenblöcke zuverlässig starten.
- Nachgeladene CMS-Zähler laufen mit
- Die Lösung hört auf das Ereignis „fpu:items-changed“ und initialisiert neu gerenderte Zähler nach. Zahlen, die erst durch Filtern, Sortieren oder Nachladen entstehen, zählen also genauso.
- Eigener Code kann andocken
- Die laufenden Zähler, ein erneuter Start und das Aufräumen sind von außen erreichbar: instances, init und destroyAll.
- Das Element sollte nur Text enthalten
- Während der Animation wird der Inhalt über textContent ersetzt. Kind-Elemente innerhalb der Zahl gehen dabei verloren — Vor- und Nachtext gehören deshalb in denselben Textinhalt, nicht in eigene Spans.