data-scroll-position

В библиотеке Locomotive Scroll атрибут data-scroll-position используется для точного управления положением элемента относительно прокрутки страницы. Он позволяет отслеживать, в каком положении находится элемент на экране, и применять к нему различные эффекты анимации или триггеры событий.

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

Атрибут data-scroll-position задаётся на HTML-элементе и принимает несколько типов значений:

  • top — верхняя граница элемента совпадает с верхней границей видимой области окна (viewport).
  • center — центр элемента совпадает с центром окна.
  • bottom — нижняя граница элемента совпадает с нижней границей окна.
  • custom — произвольная позиция, задаваемая через числовое значение или процент.

Пример базовой разметки:

<div class="section" data-scroll data-scroll-position="center">
    Контент блока
</div>

В этом примере Locomotive Scroll будет отслеживать момент, когда центр блока совпадает с центром окна, и применять к нему анимации или вычислять прогресс прокрутки.

Особенности поведения

  1. Отслеживание видимости data-scroll-position помогает определить момент появления элемента в зоне видимости. Для эффекта появления можно использовать связку с CSS-классами через data-scroll-class:
<div class="fade-in" 
     data-scroll 
     data-scroll-position="top" 
     data-scroll-class="is-visible">
    Блок с анимацией
</div>

Когда верхняя граница блока достигнет верхней границы окна, класс is-visible будет добавлен к элементу.

  1. Совместимость с горизонтальной и вертикальной прокруткой Атрибут корректно работает как для вертикальных, так и для горизонтальных скролл-контейнеров. В случае горизонтальной прокрутки значения top, center и bottom интерпретируются относительно горизонтальной оси.

  2. Процентные значения Для более гибкого контроля можно указывать позиции в процентах от высоты окна:

<div data-scroll data-scroll-position="75%">
    Контент блока
</div>

В этом случае событие срабатывает, когда верхняя граница элемента достигает 75% от высоты окна.

Использование с data-scroll-repeat

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

<div data-scroll 
     data-scroll-position="center" 
     data-scroll-repeat 
     data-scroll-class="active">
    Анимируемый блок
</div>

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

Применение с прогрессом прокрутки

Для создания прогресс-эффектов, когда значение прокрутки элемента зависит от положения относительно окна, используется сочетание data-scroll-position и data-scroll-speed или пользовательских обработчиков событий:

<div data-scroll 
     data-scroll-position="top" 
     data-scroll-speed="2">
    Параллакс эффект
</div>

В данном примере блок сдвигается быстрее прокрутки, а событие срабатывает, когда его верхняя граница достигает верхней границы окна.

JavaScript-обработка события

Для динамического реагирования на изменение позиции элемента можно использовать событие scroll с объектом Locomotive Scroll:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

scroll.on('scroll', (args) => {
  const el = document.querySelector('.section');
  if (args.currentElements['.section']?.el) {
    const progress = args.currentElements['.section'].progress;
    el.style.opacity = progress;
  }
});

Здесь args.currentElements содержит текущие элементы с data-scroll, а свойство progress показывает степень прокрутки относительно заданной позиции (data-scroll-position).

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

  • Для базовых эффектов появления чаще всего применяют top или center.
  • Для параллакс-эффектов и анимаций с прогрессом удобно использовать процентные значения.
  • При комбинировании с data-scroll-repeat следует учитывать производительность, особенно на длинных страницах с большим количеством анимируемых блоков.
  • Всегда проверять, как элемент ведёт себя при изменении размеров окна, так как позиция вычисляется динамически.

Важные нюансы

  • Атрибут работает только для элементов, которые находятся внутри контейнера с включённым data-scroll.
  • Если элемент выше или ниже видимой области при инициализации, событие может сработать сразу или не сработать вовсе в зависимости от значения data-scroll-position.
  • Для сложных анимаций часто комбинируют data-scroll-position с кастомными обработчиками и библиотеками анимации типа GSAP, что позволяет плавно контролировать свойства элементов в зависимости от прогресса скролла.

Эффективное использование data-scroll-position позволяет создавать точные и интерактивные скролл-анимации, управлять видимостью блоков и плавно интегрировать параллакс-эффекты без необходимости вручную вычислять положение элементов на странице.

Оглавление