2

Tengo un banner donde coloco los años de la empresa entre otras cosas, mi duda es como hacer para que se mueva como un contador. ¿Qué complementos utilizan?

Este es mi código donde quiero aplicar la animación de contador.

<div class="spacer feature24 spacer bg-light team4">
    <div class="container">
        <!-- Row -->
        <div class="row justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="title font-light">¿Buscas una solución? Te vamos a acompañar en este recorrido</h2>
                <h6 class="subtitle">Ofreciéndote la mejor solución que se adapte a tus necesidades.</h6>
                <div class="m-t-40">
                    <a class="btn btn-outline-inverse btn-rounded btn-md btn-arrow m-t-20" href="https://syntaxtecnologias.com.mx/index.php/Inicio_controller/servicios"><span>Ver servicios<i class="fa fa-arrow-right"></i></span></a>
                </div>
            </div>
        </div>
        <!-- Row -->
        <div class="row m-t-30 p-t-30 client-box">
            <!-- column  -->
            <div class="col-lg-4 col-md-6" style="text-align: center;">
                <div class="no-block contador">
                    <i class="fa fa-smile-o fa-3x"></i>
                    <div class="m-l-20">
                        <h3 class="font-light counter m-b-0">284</h3>
                        <h6 class="text-muted font-13 text-uppercase">Clientes Felices</h6>
                    </div>
                </div>
            </div>
            <!-- column  -->
            <!-- column  -->
            <div class="col-lg-4 col-md-6" style="text-align: center;">
                <div class="no-block contador">
                    <i class="fa fa-coffee fa-3x"></i>
                    <div class="m-l-20">
                        <h3 class="font-light counter m-b-0">20</h3>
                        <h6 class="text-muted font-13 text-uppercase">Años de experiencia</h6>
                    </div>
                </div>
            </div>
            <!-- column  -->
            <!-- column  -->
            <div class="col-lg-4 col-md-6" style="text-align: center;">
                <div class="no-block contador">
                    <i class="fa fa-users fa-3x"></i>
                    <div class="m-l-20">
                        <h3 class="font-light counter m-b-0">25</h3>
                        <h6 class="text-muted font-13 text-uppercase">Personal especializado</h6>
                    </div>
                </div>
            </div>
            <!-- column  -->
        </div>
    </div>
</div>

introducir la descripción de la imagen aquí

1 respuesta 1

5

$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },
  {
    duration: 5000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }

  });  
  
});
body {
  background-color: #F46A6A;
  color:#fff;
  max-width:800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin:1.5%;
  font-size:50px;
  background-color: #FF6F6F;
  width:200px;
  border-radius: 50%;
  height:200px;
  vertical-align: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="2200">0</div>

Podrías usar algo como esto. A través de la función animate() y usando un atributo data de HTML5 podrías generar un listado rápido de los números comprendidos entre 0 y lo que definas en el atributo data.

Referencia: Ejemplo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.