Animated Counter

Using of jQuery Animate custom Step function to animate values

HTML

<table>
  <tbody>
    <tr>
      <td>Nb Observations</td>
      <td>Nb Espèces</td>
    </tr>
    <tr>
      <td class="compteur" id="obs"><b nbobs="10">0</b></td>
      <td class="compteur" id="sps"><b nbsps="0">0</b></td>
    </tr>
  </tbody>
</table>

CSS

@import "https://fonts.googleapis.com/css?family=Abel&amp;text=0123456789";
body {
    font: normal 30px Abel;
    text-transform: uppercase;
    color: #666;
}

table {
    width: 100%;
    text-align: right;
}

#sps {
    color: #0A8;
}

#obs {
    color: #f60;
}

JavaScript

var listeCompteurs = [
        {
            "libelle" : "Observations",
            "id" : "obs",
            "nombre" : 35694,
        },
        {
            "libelle" : "Espèces",
            "id" : "sps",
            "nombre" : 2552,
        },
    ];
 
 
    for (var i in listeCompteurs) {
 
        var compteur = listeCompteurs[i];
 
 
        // affichage
 
        var afficheNombre = $("<span/>");
 
        $("body").append(
            $("<div/>")
                .append(compteur["libelle"] + " : ")
                .append(afficheNombre)
        );
 
 
        // animation
 
        afficheNombre.animate({
            "nombre" : compteur["nombre"],
        }, {
            duration: 1000 + compteur["nombre"] / 30,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            },
        });
 
    }