data-scroll-offset

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

Формат и значения data-scroll-offset

Атрибут поддерживает несколько форматов:

  1. Процентное значение от высоты окна
<div data-scroll data-scroll-offset="25%">
  Контент
</div>
  • Значение 25% означает, что эффект начнётся, когда верхняя граница элемента окажется на 25% высоты видимой области браузера.
  • Проценты вычисляются относительно высоты окна, а не элемента.
  1. Пиксельное значение
<div data-scroll data-scroll-offset="100">
  Контент
</div>
  • Эффект сработает, когда верхняя граница элемента будет отступать от верхней границы окна на 100px.
  • Можно использовать отрицательные значения для срабатывания до того, как элемент достигнет видимой области:
<div data-scroll data-scroll-offset="-50">
  Контент
</div>
  1. Два значения для верхнего и нижнего смещения
<div data-scroll data-scroll-offset="10%,90%">
  Контент
</div>
  • Первое значение — смещение при входе элемента в видимую область, второе — при выходе.
  • Это позволяет синхронизировать входные и выходные анимации без использования дополнительных скриптов.

Связь с data-scroll-class и data-scroll-repeat

data-scroll-offset часто используется совместно с data-scroll-class, который добавляет CSS-класс элементу при достижении заданного смещения. Пример:

<div data-scroll data-scroll-class="visible" data-scroll-offset="30%">
  Появляющийся контент
</div>
  • Класс visible будет добавлен, когда элемент окажется на 30% высоты окна.
  • Если задан data-scroll-repeat="true", класс может убираться и добавляться повторно при повторном скролле, что позволяет создавать циклические эффекты.

Особенности расчёта смещения

  1. Относительно начала окна Locomotive Scroll измеряет data-scroll-offset от верхней границы окна по умолчанию. Для вертикального скролла это верх страницы, для горизонтального — левая граница контейнера.

  2. Комбинация с data-scroll-delay Для плавного появления элементов можно комбинировать смещение с задержкой анимации:

<div data-scroll data-scroll-offset="50%" data-scroll-delay="0.3">
  Контент с задержкой
</div>
  • data-scroll-delay задаёт секунды до срабатывания эффекта после достижения смещения.
  1. Влияние на sticky элементы Элементы с position: sticky корректно учитываются Locomotive Scroll, но смещение следует задавать исходя из видимой позиции элемента в окне, так как его положение меняется динамически.

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

  1. Пошаговое появление блоков
<section>
  <div data-scroll data-scroll-offset="10%">Блок 1</div>
  <div data-scroll data-scroll-offset="20%">Блок 2</div>
  <div data-scroll data-scroll-offset="30%">Блок 3</div>
</section>
  • Каждый блок появляется с постепенным смещением, создавая эффект последовательного прогрева контента.
  1. Комбинация с анимациями через CSS
[data-scroll].active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-out;
}
[data-scroll] {
  opacity: 0;
  transform: translateY(50px);
}
<div data-scroll data-scroll-class="active" data-scroll-offset="40%">
  Появление с анимацией
</div>
  • data-scroll-offset определяет момент запуска анимации, обеспечивая точное позиционирование визуального эффекта.
  1. Настройка разных смещений для входа и выхода
<div data-scroll data-scroll-offset="20%,80%" data-scroll-class="in-view">
  Контент с разным смещением для входа и выхода
</div>
  • Элемент получит класс in-view при входе на 20% высоты окна и потеряет его при выходе на 80%, что позволяет контролировать появление и исчезновение независимо друг от друга.

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

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

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

Оглавление