Auf einen Wert hochzählen lassen

Nutzbar ab: Version

Veröffentlichungsdatum: 28. August 2017
Änderungsdatum: 20. März 2025

weblication cms blog hochzähler hochzählen countup

Mit der Überschriftsvariante Hochzähler wird auf eine frei definierbare Zahl hochgezählt, sobald sich das Element im sichtbaren Bereich befindet.

Diesen Effekt können Sie auch an anderen Stellen über CSS-Only oder direkt über HTML bzw. JavaScript nutzen.

Hochzähler

CSS-Only in der Überschrift

//aktiviert den Hochzähler
-w-add-classes:wglCountUp;
//setzt zusätzlich optionale Parameter
-w-add-data:'countupDuration=3,countupInitdelay=1000';

//Beispiel: Hochzählen bis 1.8 Mio. 
//-w-add-classes:wglCountUp;
//-w-add-data:'countupto=1.8 Mio,countupDuration=2.5,countupInitdelay=1000';

Definition als Hochzähler über den HTML Quelltext

<h3 class="wglCountUp" data-countup-to="320" data-countup-duration="3" data-countup-initdelay="1000">321 Mitarbeiter</h3>

Tipp

Die BASE (Mobile First) liefert mit dem Weblic® "Hochzähler im Überschriften-Element" bereits ein fertiges Element, welches Sie als Grundlage verwenden können.

Weiterführende Links

weblics.de: Hochzähler
Verbleibende Zeit anzeigen