Как анимировать объекты при прокрутке с помощью Tailwind CSS и JavaScript Intersection Observer API

Всем доброго дня! Наконец-то настал мой любимый день недели, и я рад поделиться с вами новым уроком о том, как анимировать объекты с помощью Tailwind CSS и JavaScript Intersection Observer API.

Что такое Intersection Observer API?

Intersection Observer API — это JavaScript API, позволяющий наблюдать за видимостью элементов на веб-странице. Он позволяет определить, когда элемент входит или выходит из области просмотра, и запускает функцию обратного вызова, когда элемент становится видимым.

Традиционно определить, виден ли элемент, или сравнить видимость двух элементов было сложно, что часто приводило к ненадежным методам и медленной работе браузера. С развитием Интернета потребность в такой информации возросла. Данные о пересечениях важны по нескольким причинам, например:

• Замедленная загрузка изображений или другого контента по мере прокрутки пользователем.
• Создание веб-сайтов с «бесконечной прокруткой», где контент непрерывно загружается по мере прокрутки пользователем, что устраняет необходимость в пагинации.
  
• Отслеживание видимости рекламы для расчета доходов от неё.
  
• Принятие решения о выполнении задач или анимации в зависимости от того, увидит ли пользователь результат.
  

и другие варианты использования.

Разметка

• ID id=«rotateYImage» используется для ссылки на элемент изображения в коде JavaScript. В данном случае изображение поворачивается вокруг оси Y.
• ID id=«rotateXImage» используется для ссылки на элемент изображения в коде JavaScript. В данном случае изображение поворачивается вокруг оси X.
  

<section>
  <div>
    <img id="rotateYImage" src="https://i.pinimg.com/564x/78/d1/c0/78d1c06554aead1dc1d1490f08d39ffd.jpg" />
  </div>
</section>
<section>
  <div>
    <img id="rotateXImage" src="https://i.pinimg.com/564x/78/d1/c0/78d1c06554aead1dc1d1490f08d39ffd.jpg" />
  </div>
</section>

Скрипт

Слушатели событий

• const rotateYImage = document.getElementById(«rotateYImage»): Эта строка кода выбирает элемент с идентификатором rotateYImage и присваивает его переменной rotateYImage.
• const rotateXImage = document.getElementById(«rotateXImage»): Эта строка кода выбирает элемент с идентификатором rotateXImage и присваивает его переменной rotateXImage.
  

const rotateYImage = document.getElementById("rotateYImage");
const rotateXImage = document.getElementById("rotateXImage");

Наблюдатель

• const createObserver = (element, rotateProperty, targetDegree, step) => {: Эта строка кода определяет функцию createObserver, которая принимает четыре параметра: element, rotateProperty, targetDegree и step.
• let degree = 0;: Эта строка кода инициализирует переменную под названием degree в 0. Она будет использоваться для отслеживания текущего угла поворота элемента.
  
• const observer = new IntersectionObserver((entries) => {: Эта строка кода создает новый экземпляр класса IntersectionObserver и присваивает его переменной observer.
  
• entries.forEach((entry) => {: Эта строка кода выполняет итерацию по каждой записи в массиве записей и вызывает функцию для каждой записи.
  
• if (entry.isIntersecting) {: Эта строка кода проверяет, пересекается ли запись с областью просмотра.
  
• const interval = setInterval(() => {: Эта строка кода создает новый интервал и присваивает его переменной interval.
  
• if (degree < targetDegree) {: Эта строка кода проверяет, меньше ли текущий угол поворота, чем целевой угол поворота.
  
• degree += step;: Эта строка кода увеличивает текущий угол поворота на значение шага.
  
• element.style.transform =perspective(1000px) ${rotateProperty}(${degree}deg): Эта строка кода устанавливает свойство transform элемента toperspective(1000px) rotateY(degree)deg`.
  
• } else {: Эта строка кода проверяет, больше или равен ли текущий угол поворота целевому углу поворота.
  
• clearInterval(interval);: Эта строка кода очищает интервал и останавливает анимацию поворота.
  
• }, 50);: Эта строка кода устанавливает интервал выполнения каждые 50 миллисекунд.
  

const createObserver = (element, rotateProperty, targetDegree, step) => {
    let degree = 0;
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                const interval = setInterval(() => {
                    if (degree < targetDegree) {
                        degree += step;
                        element.style.transform = `perspective(1000px) ${rotateProperty}(${degree}deg)`;
                    } else {
                        clearInterval(interval);
                    }
                }, 50);
            }
        });
    });
    observer.observe(element);
};

Создание наблюдателя

• createObserver(rotateYImage, «rotateY», 360, 5);: Эта строка кода вызывает функцию createObserver с элементом rotateYImage, свойством rotateY, целевым углом поворота 360 градусов и значением шага 5.
• createObserver(rotateXImage, «rotateX», 30, 1);: Эта строка кода вызывает функцию createObserver с элементом rotateXImage, свойством rotateX, целевым углом поворота 30 градусов и значением шага 1.
  

createObserver(rotateYImage, "rotateY", 360, 5);
 createObserver(rotateXImage, "rotateX", 30, 1);

Полный скрипт

document.addEventListener("DOMContentLoaded", function() {
    const rotateYImage = document.getElementById("rotateYImage");
    const rotateXImage = document.getElementById("rotateXImage");

 const createObserver = (element, rotateProperty, targetDegree, step) => {
        let degree = 0;
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    const interval = setInterval(() => {
                        if (degree < targetDegree) {
                            degree += step;
                            element.style.transform = `perspective(1000px) ${rotateProperty}(${degree}deg)`;
                        } else {
                            clearInterval(interval);
                        }
                    }, 50);
                }
            });
        });
        observer.observe(element);
    };
    createObserver(rotateYImage, "rotateY", 360, 5);
    createObserver(rotateXImage, "rotateX", 30, 1);
});

Заключение

В этом уроке мы узнали, как использовать API Intersection Observer для анимации объектов на веб-странице. Мы создали простую анимацию, когда элемент попадает в область просмотра, используя API Intersection Observer с JavaScript и Tailwind CSS.

Надеюсь, вам понравился этот урок, и удачного дня!

Источник размещён по ссылке.