@sadboy
Верстальщик

В чем проблема скрипта для анимации цифр при скролле?

Привет, подскажите в чем у меня ошибка
написал скрипт для анимации цифр, он хорошо работает для одного элемента, а если мне нужно сразу анимировать несколько элементов на странице, то анимируется только первый https://jsfiddle.net/zapaza10/3tfd4z4n/173/
  • Вопрос задан
  • 31 просмотр
Решения вопроса 1
0xD34F
@0xD34F
Ну так querySelector возвращает один элемент. Надо использовать querySelectorAll:

document.querySelectorAll('.number').forEach(function(n) {
  const
    top = n.getBoundingClientRect().top,
    end = +n.dataset.max;

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

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

Войти через TM ID
Похожие вопросы
CS Money Санкт-Петербург
от 120 000 до 150 000 руб.
Digital Sharks Казань
от 60 000 до 65 000 руб.
20 янв. 2019, в 22:33
30000 руб./за проект
20 янв. 2019, в 22:03
1000 руб./за проект