Contador de números animados jQuery de zero a valor Atual

Contador de números animados jQuery de zero a valor Atual

Neste tutorial vamos criar um contador de números animados com jquery.

Nesta seção, projetaremos uma estrutura com a tag abaixo. 

Usaremos as tags <div>, <h2> e a tag <span> com a class com o nome de “contagem” para estilizar e fazer o efeito dos números com jquery.

Essa tag usaremos para criar o nosso contador de números animado com html e css e jquery.

Vamos Adicionar o HTML

    <div class="box-contagem"> 
        <h2 class="title">Css</h2> 
        <span class="contagem">2500</span>
    </div>
    
    <div class="box-contagem"> 
        <h2 class="title">Html</h2> 
        <span class="contagem">115</span>
    </div>
    
    <div class="box-contagem"> 
        <h2 class="title">jQuery</h2> 
        <span class="contagem">200</span>
    </div>
    
    <div class="box-contagem"> 
        <h2 class="title">wordPress</h2>
        <span class="contagem">600</span>
    </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar a nosso contador de números com css, html e jquery.

.box-contagem { 

    width:100%; 
    margin-right:4%; 
    margin-bottom:20px; 
    float:left; 
    background:#09aeff; 
    box-shadow: 1px 0px 1.2px 0px #e3e3e3;
    border-radius:3px; 
    padding:1em; 

}

.box-contagem .title { 

    width:100%; 
    float:left; 
    font-size: 30px;
    font-family: 'open_sansregular'; 
    color:#fff; 
    border-bottom: 1px #44c1ff solid; 
    margin-bottom: 5px; 
    padding-bottom: 5px; 

}

.box-contagem .contagem { 

    width:100%; 
    float:left; 
    color: #ffffff;
    font-size: 25px;
    font-family: 'open_sansregular'; 

}

/*Responsivo*/

/*768PX BREAKPOINT*/
@media (min-width:48em){

.box-contagem   { width:22%; }
.box-contagem:nth-of-type(4n+0) { margin-right:0; margin-bottom:0; }

} 

Nesta seção, vamos adicionar o script para animar os numeros que esta na class “contagem” dentro da tag span.

$('.contagem').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 5000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Lembrando que você tem que puxar o arquivo jquery.js

baixo o exemplo para você ver como funciona.

<script src="js/jquery.js"></script>

Combinando as Três seções acima Html, Css e jQuery temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando