Показать сообщение отдельно
  #1 (permalink)  
Старый 30.06.2023, 02:54
Новичок на форуме
Отправить личное сообщение для max74max74 Посмотреть профиль Найти все сообщения от max74max74
 
Регистрация: 30.06.2023
Сообщений: 1

Анимация цифр на сайте
Здравствуйте! Подскажите, пожалуйста. Делаю анимацию цифр (отсчет от нуля до определенного значение) при показе определенного блока на сайте.
Но проблема в том, что когда цифры доходят до конца, то начинается обратный отсчет. Как сделать чтобы не было обратного отсчета?
И вторая проблема в том, что отчет останавливается, если начать переключать вкладки браузера во время анимации цифр.

<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));
      }
    });
  });
});
}
}
Ответить с цитированием