Введение в анимацию прокрутки с помощью пересечения наблюдателя

Наблюдатель пересечения (IO) обнаруживает, когда элемент входит или покидает видоперт (или родительский элемент). Его можно использовать, чтобы легко добавить анимацию на прокрутке без внешних библиотек.

IO асинхронно и гораздо более производительнее, чем слушатели прокрутки 👍.

Кстати, если вы узнаете лучше через видео, я настоятельно рекомендую это Учебник на YouTube Кевин Пауэлл.

Вот основной пример исчезновения анимации на прокрутке с использованием контрольного наблюдателя.

В этом примере мы исчезаем на изображении на прокрутке, добавив класс Fadein к нему, когда он входит в просмотр. Это JS:

const img = document.querySelector("img")

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
    }
  })
}
const options = {}

const myObserver = new IntersectionObserver(callback, options)
myObserver.observe(img)

Легко, верно? Начнем 😁!

Во -первых, мы создаем наблюдатель по пересечению, вызывая его конструктор и передавая его функцию обратного вызова и необязательный объект параметров.

const myObserver = new IntersectionObserver(callback, options)

Варианты

Параметры объект с 3 свойствами:

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
}

В моем примере я вернул пустой объект {} Таким образом, параметры по умолчанию применяются. (То же самое, что ничего не вернет.)

корень : по умолчанию NULL Анкет Это просмотр. Может быть документ или HTML -элемент. Если корень NULL , по умолчанию документ .
rootmargin : по умолчанию 0px. Определяет смещения каждой стороны ограничивающей коробки корня. Другими словами, положительные значения уменьшают рамку корневого ограничения, а отрицательные значения увеличивают его. Попробуйте прокрутить 3 коробки в этом примере.

Аналогично синтаксису маржи CSS: «0px 5px 10px 15px» означает верхний: 0px, справа: 5px, внизу: 10px и слева: 0px. Принимает только PX и %. ⚠ 0 не является принятым значением, используйте 0PX или 0% вместо этого.

Порог: по умолчанию 0. Порог составляет от 0 до 1,0. 0 Значение, как только один пиксель виден, будет выполнен обратный вызов. 1.0 означает, что каждый пиксель должен быть видимым перед вызовом обратного вызова. (⚠ Если вы установите порог на 1, а элемент больше корня, число не достигнет 1, потому что в любое время будут некоторые части невидимы.)

Обратный вызов

Функция обратного вызовов принимает список записей и пересекающего наблюдателя в качестве параметра.

const callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

Наблюдатель можно использовать для динамического добавления или удаления элементов для наблюдения. Подробнее об этом ниже.

Основное внимание уделяется списку записи Анкет Есть один входной объект для каждого наблюдаемого элемента. Обычная практика использовать foreach для итерации.

Каждая запись имеет следующие полезные свойства:

inpit.sintersective Возвращает логическое. Верно означает, что элемент в настоящее время пересекается с корнем.
inpit.target Возвращает наблюдаемый элемент.

Я использовал их обоих в анимации Fadein:

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
    }
  })
}

inpit.boundingClientRect Возвращает границы прямоугольника наблюдаемого элемента.
intry.IntersectionRatio Возвращает число от 0,0 до 1,0, что указывает на то, что на самом деле видно из наблюдаемого элемента в корне.

И т.п. 😁 Я назвал самых важных. Вы можете найти список всех свойств записи Здесь Анкет

Выберите элементы, которые будут наблюдать

Чтобы выбрать элемент для наблюдения, мы используем Наблюдайте () Метод нашего пересечения наблюдателя.

myObserver.observe(img)

Вот и все! Теперь myobserver обнаружит, когда img входит или оставьте Viewport и запускает обратный вызов.

Если вы хотите наблюдать много элементов, вы должны добавить их один за другим.

myObserver.observe(img1)
myObserver.observe(img2)
myObserver.observe(img3)

Или давая им общий класс и итерацию с foreach :

const imgList = document.querySelectorAll(".imgToAnimate")

// setting your observer here

imgList.forEach(img => {
  myObserver.observe(img)
})

Чтобы прекратить наблюдать, позвоните Unobserve () На элементе:

myObserver.unobserve(img)

Чтобы остановить наблюдение за каждым элементом сразу же вызовать Densoncect () :

myObserver.disconnect()

Вы также можете использовать эти методы в обратном вызове:

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("fadeIn")
      // stop observing this element
      observer.unobserve(entry.target)
    }
  })
}

РЕДАКТИРОВАТЬ: Это хорошая практика, чтобы развернуть элемент после того, как мы закончим играть с ним.

Вот и все!

Я надеюсь, что вам понравилось это короткое вступление на пересечении наблюдателя 😃.

Источник: Мд

Помимо анимации на свитке, его можно использовать для улучшения скорости рендеринга и первой удовлетворенной краски с ленивой загрузкой сценариев и носителей.

За пределами оснований

Вот несколько примеров анимации прокрутки с IO. Я постараюсь написать блог на каждом, когда найду время 😅.

Введите и оставьте анимацию

Пролистать наверх

Обновите вкладку «Обновление» на прокрутке

И еще больше 😁!

Оригинал: “https://dev.to/ljcdev/introduction-to-scroll-animations-with-intersection-observer-d05”