darkleviathan
@darkleviathan

Как применить анимацию чисел при скролле к нескольким блокам?

Как применить анимацию чисел к нескольким блокам? Сейчас получается только с одним. Вот сам код:

<div class="number" data-max="300">0</div>
<div class="number" data-max="280">0</div>
<div class="number" data-max="95">0</div>


var number = document.querySelector('.number'),
		numberTop = number.getBoundingClientRect().top,
    start = +number.innerHTML, end = +number.dataset.max;

window.addEventListener('scroll', function onScroll() {
		if(window.pageYOffset > numberTop - window.innerHeight / 2) {
    		this.removeEventListener('scroll', onScroll);
        var interval = setInterval(function() {
        		number.innerHTML = ++start;
            if(start == end) {
            		clearInterval(interval);
            }
        }, 5);
    }
});
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
document.querySelectorAll('.number').forEach(number => {
  const top = number.getBoundingClientRect().top;

  window.addEventListener('scroll', function onScroll() {
    if (window.pageYOffset > top - window.innerHeight / 2) {
      this.removeEventListener('scroll', onScroll);
      let start = +number.innerHTML;
      const interval = setInterval(function() {
        number.innerHTML = ++start;
        if (start >= number.dataset.max) {
          clearInterval(interval);
        }
      }, 5);
    }
  });
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 сент. 2019, в 10:34
10 руб./за проект
22 сент. 2019, в 09:39
3500 руб./за проект