Особенности работы атрибутов

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

Атрибут data-scroll

Атрибут data-scroll служит базовым маркером для всех элементов, которые должны участвовать в скролл-анимации. Он может принимать несколько параметров через дополнительные атрибуты:

<div data-scroll data-scroll-speed="2" data-scroll-direction="horizontal">
  Контент
</div>
  • data-scroll-speed – управляет скоростью движения элемента относительно скролла. Значение 1 соответствует базовой скорости, большее значение ускоряет движение, отрицательное – инвертирует направление.
  • data-scroll-direction – задаёт направление движения: vertical (по умолчанию) или horizontal.

Эти параметры позволяют создавать эффекты параллакса и динамических сдвигов элементов без вмешательства в основную логику скриптов.

Атрибут data-scroll-sticky

Позволяет закрепить элемент относительно окна просмотра в заданной зоне скролла. Пример:

<div data-scroll data-scroll-sticky data-scroll-target="#section1">
  Закреплённый элемент
</div>
  • data-scroll-target – идентификатор родительского блока, внутри которого элемент будет фиксирован.
  • Sticky-элементы автоматически вычисляют позицию и высоту родителя, обеспечивая плавное закрепление при прокрутке.

Важно учитывать, что sticky-элемент не выходит за пределы родителя, поэтому высота родителя должна соответствовать желаемой зоне закрепления.

Атрибуты для триггеров событий

Locomotive Scroll поддерживает вызов событий при попадании элемента в зону видимости:

  • data-scroll-call – имя события, которое будет вызвано при пересечении элемента с экраном.
  • data-scroll-repeat – если указано, событие может повторяться при повторном пересечении.

Пример использования:

<div data-scroll data-scroll-call="animateBox" data-scroll-repeat>
  Элемент для анимации
</div>

В JavaScript можно подписаться на это событие через метод on:

scroll.on('call', (func, dir, obj) => {
  if(func === 'animateBox'){
    // Запуск анимации
  }
});

Атрибут data-scroll-offset

Позволяет смещать точку срабатывания эффектов относительно видимой области экрана. Принимает значения в пикселях или процентах:

<div data-scroll data-scroll-offset="100">
  Сдвиг срабатывания
</div>
  • Значение 100 означает, что эффект сработает на 100 пикселей раньше достижения элемента верхней границей окна.
  • Процентное значение 50% срабатывает, когда элемент пересекает половину высоты окна.

Атрибуты для параллакса

Для создания сложных параллакс-эффектов используются сочетания data-scroll-speed, data-scroll-direction и data-scroll-position.

<div data-scroll data-scroll-speed="3" data-scroll-position="top">
  Параллакс элемент
</div>
  • data-scroll-position – определяет точку отсчёта движения: top, bottom, center.
  • Комбинация этих атрибутов позволяет синхронизировать движение нескольких элементов с разной скоростью, создавая глубину и эффект динамики.

Динамическое изменение атрибутов

Locomotive Scroll поддерживает обновление атрибутов после инициализации. Это особенно важно при динамическом контенте:

scroll.update();

Метод update() пересчитывает позиции элементов с атрибутами data-scroll, учитывая добавленные или изменённые элементы на странице.

Советы по использованию атрибутов

  1. Минимизировать количество активных атрибутов на странице – большое число параллакс-элементов может снизить производительность.
  2. Использовать явные значения для data-scroll-speed – дробные значения создают более плавные эффекты.
  3. Комбинировать sticky и call осторожно – элементы, закреплённые с data-scroll-sticky, могут пересекаться с триггерами событий, что требует точного контроля смещений.
  4. Проверять родительские блоки – sticky-элементы и параллакс зависят от размеров контейнеров.

Эти атрибуты формируют основу гибкой и мощной системы анимаций Locomotive Scroll, позволяя создавать сложные визуальные эффекты без громоздкого JavaScript-кода.

Оглавление