jQuery
Compteur animé en jQuery
Fiche écrite en 2013, pour les navigateurs et les versions de l’époque. Vérifiez qu’elle correspond encore à votre environnement avant de l’appliquer.
Le compteur qui défile de zéro jusqu’au chiffre final, sur les pages de chiffres clés : jQuery sait animer n’importe quelle propriété d’un objet, pas seulement celles du CSS. On anime donc une valeur, et à chaque étape on écrit son arrondi dans la page.
<div id="champ_text">0</div>$(document).ready(function() {
var old_nbPoint = 0;
var nbPoint = 100;
jQuery({someValue: old_nbPoint}).animate({someValue: nbPoint}, {
duration: 10000,
easing:'swing',
step: function() {
$('#champ_text').text(Math.ceil(this.someValue) + " points");
}
});
});