Как использовать IntersectionObserver?

Question

Мне нужно запустить анимацию в тот момент, когда человек доскроллил до необходимой секции. Я хочу в нужный момент добавить модификатор целевому элементу с помощью IntersectionObserver, но мой код не работает.

Помогите разобраться, как правильно использовать эту технологию. (Модификатор хочу добавить диву .section__item) Вот код:

let options = {
  root: document.querySelector('.statistic'),
  rootMargin: '5px',
  threshold: 0.5
};

let animate = document.querySelector('.statistic__item');
let target = document.querySelector('.statistic__inner');
document.querySelector('animate');
let myFirstObserver = new IntersectionObserver(callback => {
  let = observer.observe(target);
  animate.classList.add('animate');
}, options);

<section class="statistic" id="stat">

  <div class="container">
    <div class="row justify-content-center">
      <h2 class="statistic__title col-xxl-2 col-xl-4 col-lg-5 col-md-5 col-sm-4">
        НЕМНОГО СТАТИСТИКИ
      </h2>
    </div>
    <div class="statistic__inner">
      <div class="statistic__item">
        <div class="row justify-content-center">
          <div class="statistic__card col-xl-3 col-xxl-3 col-lg-2 col-md-3 col-sm-3">
            <img class="statistic__card-img" src="img/смайл.png" alt="">
            <h3 class="statistic__card-title">
              120
            </h3>
            <p class="statistic__card-text">
              СЧАСТЛИВЫХ КЛИЕНТОВ
            </p>
          </div>

          <div class="statistic__card col-xl-3 col-xxl-3 col-md-3 col-lg-2 col-sm-3">
            <img class="statistic__card-img" src="img/скобки.png" alt="">
            <h3 class="statistic__card-title">
              4,600
            </h3>
            <p class="statistic__card-text">
              ЧАСОВ РАБОТЫ

            </p>
          </div>

          <div class="statistic__card col-xl-3 col-xxl-3 col-md-3 col-lg-2 col-sm-3">
            <img class="statistic__card-img" src="img/галочка.png" alt="">
            <h3 class="statistic__card-title">
              340
            </h3>
            <p class="statistic__card-text">
              ПРОЕКТОВ ЗАВЕРШЕНО

            </p>
          </div>

          <div class="statistic__card col-xl-3 col-xxl-3 col-md-3 col-lg-2 col-sm-3">
            <img class="statistic__card-img" src="img/кубок.png" alt="">
            <h3 class="statistic__card-title">
              23
            </h3>
            <p class="statistic__card-text">
              НАГРАД ПОЛУЧЕНО

            </p>
          </div>
        </div>
      </div>
      <div class="parallax__img"></div>
    </div>
  </div>
</section>

Answer 1

Хорошая статья про работу с наблюдателем. Тыц

window.onload = () => {
  observer();

}

function observer() {
  // устанавливаем настройки
  const options = {
    // родитель целевого элемента - область просмотра, не конкретный DOM элемент
    root: null,
    // без отступов
    rootMargin: '5px',
    // процент пересечения
    threshold: 0.5
  }

  // создаем наблюдатель
  const observer = new IntersectionObserver((entries, observer) => {
    // для каждой записи-целевого элемента
    entries.forEach(entry => {
      // если элемент является наблюдаемым
      if (entry.isIntersecting) {
        const tagTarget = entry.target;

        console.log('Наблюдатель работает');

        /*
         *
         *Ваш код
         * 
         * 
         */

        // прекращаем наблюдение
        // observer.unobserve(tagTarget)
      }
    })
  }, options)

  // следим за всеми элементами с классом 'statistic__item' на странице
  const arr = document.querySelectorAll('.statistic__item')
  arr.forEach(i => {
    observer.observe(i)
  })
}

БЛОГ НА HUSL

Как использовать IntersectionObserver?

Ответы (1 шт):