Zahlen aufzählen bei runter scrollen - JavaScript?
Hey zusammen.
Ich arbeite grad an der neuen Webseite für meinen Server und habe dort eine kleine Statistik (Siehe Bild) eingebaut. Was mir so eingefallen ist, ist, sobald man an dieser Statistik "ankommt" sollen die Zahlen von 0 ganz schnell auf 100, 400, 7k wahtever hochzählen. 7k wird denke ich bisschen schwer, aber die anderen. Lässt sich das einrichten mit JavaScript bzw. gibt es dafür Tutorials oder wie nennt sich das?
Viele Grüße
3 Antworten
Verwende die setInterval-Funktion, um zeitgesteuert eine Variable, die du relativ zu dieser Funktion global definierst, hochzählst.
https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setInterval
Die Scroll-Position musst du selbst abprüfen und dann deine Funktion triggern, die das Intervall startet.
- https://stackoverflow.com/questions/2481350/how-to-get-scrollbar-position-with-javascript
- https://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery (mit jQuery)
Die Darstellung der Zahlen regelst du via Änderung des DOM.
Alternativ zur dynamischen Darstellung von Statistiken eignet sich auch die Bibliothek d3.js, wenn es etwas grafischer ablaufen soll.
Das nennt sich.. zähler?
for schleife.. text mit zähler aktualisieren.. ein bisschen warten & weiter
Ich habe dir mal ein Beispiel erstellt: https://jsfiddle.net/q1kaqm6z/
Erst kommt Text, dann deine drei Elemente, dann wieder Text und am Ende noch ein Zähler. D.h. der Code funktioniert auch für Elemente an unterschiedlichen Positionen der Seite. Solltest du Fragen haben, kannst du dich gerne melden.
Hast du die IDs für die Elemente mit den Zahlen richtig eingetragen? In den Elementen darf außer der Nummer nichts Anderes stehen, kein p oder Ähnliches. Ansonsten müsste der Code eigentlich ohne Weiteres funktionieren. Wenn nicht, erstelle mal ein minimales Fiddle, soweit möglich.