Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Анимация цифр на сайте (https://javascript.ru/forum/events/85331-animaciya-cifr-na-sajjte.html)

max74max74 30.06.2023 02:54

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

<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));
      }
    });
  });
});
}
}

рони 30.06.2023 10:37

max74max74,
https://javascript.ru/forum/misc/603...tml#post439702


Часовой пояс GMT +3, время: 07:52.