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 mit Schwelle 0,4 wartet, bis die Zahl im Bild ist — 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.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: ".",
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
- Der Schwellenwert liegt bei 40 Prozent des Elements. Ist ein Element höher als 40 Prozent des Viewports, wäre das nie zu erreichen — dort entscheidet stattdessen der sichtbare Anteil, 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.