Counter hochzählen lassen
Eingetragen von DrupalFan (1646)am 29.01.2018 - 10:50 Uhr in
Hallo,
ich habe auf einer Webseite optisch schön dargestellt 3 oder mehrere Zahlen, die darstellen wie viele von diesen "Dingen" existieren oder schon umgesetzt wurden, etc.
Die Zahlen (Counter-Stände) sind fix eingegeben.
Nun möchte ich aber, dass die Counter beim Öffnen dieser Seite von 1 beginnend hochzählen bis zu dem Zählerstand, der eingegeben wurde.
Da mehrere Counter nebeneinander existieren, ist auch eventuell zu beachten, dass der Zählvorgang bei kleinen Zählerständen ungefähr gleich lang benötigt wie bei sehr hochen Zählerständen (sonst müsste man ewig warten, bis der andere Counter bis 10.000 zählt, wenn der erste Counter nur bis 100 zu zählen hat).
Wie kann man das realisieren, gibt es dafür Beispiel-Code?
Merci.
- Anmelden oder Registrieren um Kommentare zu schreiben
damit sollte das
am 30.01.2018 - 06:03 Uhr
damit sollte das gehen.
<div class="sppb-animated-number" data-digit="603" data-duration="603">603</div>Wenn du die Duration überall auf 10.000 setzt
Lib?
am 30.01.2018 - 10:26 Uhr
Klingt einfach.
Braucht man dazu ein Modul oder eine JQuery lib für Drupal 7?
nein, das geht per css
am 30.01.2018 - 15:02 Uhr
nein, das geht per css
Gibt es dazu irgendwo eine
am 30.01.2018 - 16:54 Uhr
Gibt es dazu irgendwo eine kleine Anleitung im Internet oder einen dazupassenden Link, habe nichts gefunden.
gib mal css und data-duration
am 30.01.2018 - 17:34 Uhr
gib mal css und data-duration ein...
Ja, das schon. Hätte aber
am 30.01.2018 - 21:07 Uhr
Ja, das schon.
Hätte aber gerne einen Counter gefunden, der auf diese Weise hochzählt, also einen Beispiel-Code für einen so realisierten Counter.
Dieses jQuery Plugin würde
am 31.01.2018 - 16:12 Uhr
Dieses jQuery Plugin würde ich empfehlen:
http://aishek.github.io/jquery-animateNumber/
Danke
am 31.01.2018 - 16:17 Uhr
Danke, das klingt sehr gut.
Habe aber nicht herausgefunden, ob man damit 3 Zähler gleichzeitig hochzahlen kann, so dass ein Zähler bis 20, ein Zähler bis 150 und der dritte Zähler bis 10.000 zählt, wobei alle drei gleichzeitig fertig werden (sprich der dritte Zähler muss viel schneller zählen usw.).
Geht das?
Eigentlich ist auf der Seite
am 31.01.2018 - 16:42 Uhr
Eigentlich ist auf der Seite bereits alles erklärt...
Man könnte einfach 3 HTML-Elemente mit 3 unterschiedlichen IDs anlegen und diese dann im jQuery-Script ansprechen und die jeweils angestrebte Zahl einfügen.
Beispiel von der Seite: http://aishek.github.io/jquery-animateNumber/
<p>This plugin only <span id="lines">0</span> lines of code.</p>$('#lines').animateNumber({ number: 165 });
Ja klar, aber die Dauer des
am 01.02.2018 - 11:11 Uhr
Ja klar, aber die Dauer des Hochzählens müsste noch festgelegt werden. Damit bis 150 das Zählen gleich lange dauert wie bis 10.000. Hab ich im letzten Posting auch geschrieben.
Folgendes habe ich mal in
am 02.02.2018 - 13:51 Uhr
Folgendes habe ich mal in einem Projekt verwendet (ist nun nicht mit dem von mir vorher empfohlenen Script erstellt):
jQuery('#deineID').prop('Counter',0).animate({Counter: 10000}, {
duration: 4000,
easing: 'swing',
step: function (now) {
jQuery(this).text(Math.ceil(now));
}
});
Wenn du bei allen Elementen die gleiche Duration vergibst, hören sie alle gleichzeitig auf zu zählen, unabhängig davon wie groß die Zahl ist.
geht natürlich mit css und
am 02.02.2018 - 14:17 Uhr
geht natürlich mit css und jquery. hier
https://codepen.io/shivasurya/pen/FatiB
DANKE! Genau das ist es.
am 02.02.2018 - 16:55 Uhr
DANKE!
Genau das ist es.