Здравствуйте! Подскажите, пожалуйста. Делаю анимацию цифр (отсчет от нуля до определенного значение) при показе определенного блока на сайте.
Но проблема в том, что когда цифры доходят до конца, то начинается обратный отсчет. Как сделать чтобы не было обратного отсчета?
И вторая проблема в том, что отчет останавливается, если начать переключать вкладки браузера во время анимации цифр.
<div id="start_counter">
<h1 class="anim">100</h1>
</div>
var start_counter = document.getElementById("start_counter");
document.onscroll = function() {
var top = start_counter.getBoundingClientRect().top;
var heightScreen = document.documentElement.clientHeight;
var body = document.querySelector("body");
var g = top - heightScreen;
if (g <=0){
$(document).ready(function() {
$('.anim').each(function() {
$(this).prop('CounterUp', 0).animate({
CounterUp: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function(number) {
$(this).text(Math.ceil(number));
}
});
});
});
}
}