Auf einen Wert hochzählen lassen
Veröffentlichungsdatum: 28. August 2017
Änderungsdatum: 20. Februar 2024
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 nutzen.
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.
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.