Como crear un contador animado con jquery wordpress 2019

Author : Jhon

Publicado : 12 octubre, 2019

Para crear un contador animado jquery primero debemos de crear el html que se mostrara, basandonos en que utilizamos bootstrap para crear un contenedor escribimos el siguiente codigo :

<div class="container">
    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="counter" id="contador">
                <div class="caja">
                    <p data-value="200">200</p>
                    <br>
                    <p>Prueba 1</p>
                </div>
                <div class="caja">
                    <p data-value="80">80</p>
                    <br>
                    <p>Prueba 2</p>
                </div>
                <div class="caja">
                    <p data-value="60">60</p>
                    <br>
                    <p>Prueba 3</p>
                </div>
                <div class="caja">
                    <p data-value="40">40</p>
                    <br>
                    <p>Prueba 4</p>
                </div>
            </div>
        </div>
    </div>
</div>
el segundo paso sera el css, como queremos que se muestre el contador en nuestra web esto es a nuestro gusto :
.counter p {
    display: inline-block;
    width: 100px;
    height: 70px;
}

.counter .caja {
    border: 1px solid gray;
    border-radius: 6px;
    display: inline-block;
}

.counter {
    text-align: center;
    font-size: 30px;
    margin-top: 40px;
}

por ultimo y más importante viene el código jquery que hara que esto funcione:

$('.counter p').each(function() {
    $(this).prop('Counter', 0).animate(Counter: $(this).data('value')
    }

    , {
        duration: 1000,
        easing: 'swing', //Esto puede ser una funcion anonima, no hace falta el (now)
        step: function(now) {
            //toFixed(0); esta funcion sirve para poner decimales en el numero que animamos,
            //si pongo 2 en vez de 0 me imprimira 2 decimales ej: 200.00
            $(this).text(this.Counter.toFixed(0));
        }
    }

);

});

….

Deja una respuesta

Tu dirección de correo electrónico no será publicada.