0

Quiero mostrar cuatro contadores en una misma página, pero me gustaría que se mostrasen de forma consecutiva. Cuando termine uno se muestre el siguiente y así hasta el final y volver al inicio, que se reproduzca en modo bucle.

Tampoco necesito que la función se active cuando hago scroll, ya me sirve con sólo cargar la página.

No se si he conseguido explicarme con claridad.

Lo que tengo ahora montado es lo siguiente:

var a = 0;
$(window).scroll(function () {
    var oTop = $('#counter').offset().top - window.innerHeight;
    if (a == 0 && $(window).scrollTop() > oTop) {
        $('.counter-value').each(function () {
            var $this = $(this),
                countTo = $this.attr('data-count');
            $({
                countNum: $this.text()
            }).animate({
                countNum: countTo
            },
                {
                    duration: 4000,
                    easing: 'swing',
                    step: function () {
                        $this.text((Math.floor(this.countNum).toLocaleString("en-US")) + $this.attr('data-character'));
                    },
                    complete: function () {
                        $this.text((this.countNum.toLocaleString("en-US")) + $this.attr('data-character'));
                    }
                });
        });
        a = 1;
    }
});
.counter-value-1, .counter-value-2, .counter-value-3, .counter-value-4 { 
    font-family: Georgia;
    font-size: 40px;
    color: black;
    line-height: 1.5em;
    text-align: center;
    padding: 17px 0;
}
.counter-value-1:after, .counter-value-2:after, .counter-value-3:after, .counter-value-4:after  {
    content: attr(data-desc);
    display: block;
    text-transform: none;
    font-size: 18px;
    color: black;
    line-height: 1.2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="counter">
    <div class="sqs-col sqs-col-3 counter-value-1 counter-value" data-character="%" data-count="93" data-desc="User interaction with insights">0</div>
    <div class="sqs-col sqs-col-3 counter-value-2 counter-value" data-character="%" data-count="24" data-desc="Cross selling ratio">0</div>
    <div class="sqs-col sqs-col-3 counter-value-3 counter-value" data-character="%" data-count="20" data-desc="Customer engagement increase">0</div>
    <div class="sqs-col sqs-col-3 counter-value-4 counter-value" data-character="Months" data-count="3" data-desc="Time to go live leveraging SaaS">0</div>
</div>

Muchas gracias por adelantado!!

2
  • Hola Juanma, ¿será queres crear un carousel? ¿como esperas que sea la animación? de arriba hacia abajo, de derecha a izquierda, o al revez de alguna de las dos?
    – Marcos
    Commented el 19 feb. a las 18:02
  • Hola @Marcos: En disposición sería algo similar a esta imagen que adjunto: enlace Entiendo que el efecto de desplazamiento de los números es algo más laborioso, pero creo que la transición entre los diferentes contadores podría ser similar. Commented el 20 feb. a las 7:11

1 respuesta 1

0

Gracias a todos por el interés, finalmente lo pude solucionar. Comparto el código por si alguien puede hacer uso de él:

        $(document).ready(function () {
            function animateCounter($counter) {
                var countTo = $counter.attr('data-count');
                $counter.fadeIn(500, function () {
                    $({ countNum: $counter.text() }).animate({
                        countNum: countTo
                    }, {
                        duration: 4000,
                        easing: 'swing',
                        step: function () {
                            $counter.text((Math.floor(this.countNum).toLocaleString("en-US")) + $counter.attr('data-character'));
                        },
                        complete: function () {
                            $counter.text((this.countNum.toLocaleString("en-US")) + $counter.attr('data-character'));
                            setTimeout(function () {
                                $counter.fadeOut(500, function () {
                                    $counter.text('0'); // Reiniciar el contador
                                    var $nextCounter = $counter.next('.counter-value');
                                    if ($nextCounter.length > 0) {
                                        animateCounter($nextCounter); // Repetir el contador siguiente después de 2.5 segundos
                                    } else {
                                        animateCounter($('.counter-value').first()); // Si no hay siguiente, reiniciar desde el principio
                                    }
                                });
                            }, 2500);
                        }
                    });
                });
            }

            animateCounter($('.counter-value').first()); // Comenzar con el primer contador
        });
    .counter-value {
            font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
            font-size: 170px;
            color: #023642;
            line-height: 1.1em;
            text-align: right;
            padding: 17px 0;
            display: none; /* Ocultamos todos los contadores inicialmente */
            transition: transform 1s ease; 
            font-weight: 600;
        }


        .counter-value:after {
            content: attr(data-desc);
            display: block;
            text-transform: none;
            font-size: 30px;
            color: #023642;
            line-height: 1.1em;
            font-weight: 500;
        }
    <div id="counter">
        <div class="counter-value counter-value-1" data-character="%" data-count="93" data-desc="User interaction with insights">0</div>
        <div class="counter-value counter-value-2" data-character="%" data-count="24" data-desc="Cross selling ratio">93</div>
        <div class="counter-value counter-value-3" data-character="%" data-count="20" data-desc="Customer engagement increase">24</div>
        <div class="counter-value counter-value-4" data-character="Months" data-count="3" data-desc="Time to go live leveraging SaaS">20</div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

2
  • Los snippets (así como el que colocaron en una edición a tu pregunta), se agregan con el botón que indica <>.
    – padaleiana
    Commented el 21 feb. a las 12:00
  • Muchas gracias @padaleiana! Solucionado!! Commented el 21 feb. a las 14:59

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.