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!!