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

Для работы с Locomotive Scroll необходимо сначала создать экземпляр класса LocomotiveScroll. При этом ключевыми параметрами являются контейнер, в котором будет происходить прокрутка, и флаги настройки smooth-эффекта.

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  multiplier: 1.2,
});

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

Основные события

Locomotive Scroll предоставляет несколько категорий событий:

  1. scroll – срабатывает при любом изменении позиции прокрутки.
  2. call – позволяет отслеживать элементы с атрибутом data-scroll-call.
  3. scrollTo – срабатывает после завершения анимации прокрутки к указанной позиции.
  4. resize – уведомляет о смене размеров контейнера или окна.

Событие scroll

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

scroll.on('scroll', (args) => {
  console.log('Позиция по оси Y:', args.scroll.y);
  console.log('Позиция по оси X:', args.scroll.x);
});

Особенности:

  • Аргумент args содержит объект с полями:

    • scroll: текущие координаты прокрутки {x, y}.
    • limit: максимальные значения прокрутки {x, y}.
    • direction: направление прокрутки ('up' или 'down' для вертикальной прокрутки).
    • speed: скорость прокрутки.

  • Событие вызывается на каждом кадре при изменении позиции, поэтому внутри обработчика не рекомендуется выполнять тяжелые вычисления без оптимизации через requestAnimationFrame или throttle.

Событие call

Событие call позволяет реагировать на элементы с атрибутом data-scroll-call.

Пример HTML:

<div data-scroll data-scroll-call="fadeIn" data-scroll-repeat>
  Контент
</div>

Привязка слушателя в Jav * aScript:

scroll.on('call', (func, direction, obj) => {
  if (func === 'fadeIn' && direction === 'enter') {
    obj.el.classList.add('visible');
  }
});

Пояснения:

  • func – значение из атрибута data-scroll-call.
  • direction – направление появления элемента: 'enter' или 'leave'.
  • obj – объект с элементом и другими параметрами, такими как прогресс видимости.

Дополнительно: атрибут data-scroll-repeat позволяет повторно срабатывать событию при повторном входе элемента в зону видимости.

Событие scrollTo

Событие scrollTo срабатывает после завершения анимации прокрутки к конкретной позиции, заданной методом scroll.scrollTo().

scroll.scrollTo('#target-section', {
  offset: -50,
  duration: 800,
  easing: [0.25, 0.00, 0.35, 1.00]
});

scroll.on('scrollTo', (obj) => {
  console.log('Анимация прокрутки завершена', obj);
});

Параметры объекта scrollTo:

  • offset – смещение от целевого элемента.
  • duration – время анимации в миллисекундах.
  • easing – кривая ускорения анимации, задается массивом из 4 чисел для cubic-bezier.

Объект события содержит информацию о завершенной прокрутке и целевом элементе.

Событие resize

Событие resize используется для реагирования на изменение размеров контейнера или окна, что важно для пересчета внутренних параметров прокрутки.

scroll.on('resize', (obj) => {
  console.log('Новые размеры контейнера:', obj.currentElements);
});

Советы по использованию:

  • После динамического добавления контента нужно вызвать scroll.update() для корректного пересчета координат.
  • Можно комбинировать с debounce, чтобы избежать частого вызова при быстром изменении размера окна.

События элементов и прогресс

Каждый элемент с атрибутами data-scroll и data-scroll-repeat поддерживает отслеживание прогресса появления на экране:

scroll.on('scroll', ({ currentElements }) => {
  Object.values(currentElements).forEach(el => {
    if (el.progress) {
      el.el.style.opacity = el.progress;
    }
  });
});
  • currentElements – объект, где ключи – уникальные идентификаторы элементов, а значения – информация о текущем состоянии.
  • progress – значение от 0 до 1, отражающее степень видимости элемента.

Это позволяет реализовать сложные анимации и эффекты при прокрутке, такие как fade, scale или parallax.

Удаление слушателей

Для оптимизации работы страницы или при уничтожении экземпляра LocomotiveScroll можно удалить слушатели:

scroll.off('scroll');
scroll.off('call');
scroll.destroy();
  • off – отключает конкретное событие.
  • destroy – полностью уничтожает объект прокрутки, освобождая ресурсы и убирая все слушатели.

Рекомендации по производительности

  • Использовать requestAnimationFrame для вычислений внутри событий scroll.
  • Минимизировать тяжелые операции DOM внутри слушателей.
  • Применять scroll.update() после динамических изменений контента.
  • Для повторяющихся анимаций использовать data-scroll-repeat, чтобы события срабатывали корректно при повторной видимости.

С помощью этих инструментов можно полностью управлять поведением элементов при прокрутке, реализуя плавные анимации и интерактивные эффекты.

Оглавление