Auf einen Wert hochzählen lassen

Nutzbar ab: Version

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.