data-scroll-target

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

Основная концепция

По умолчанию Locomotive Scroll отслеживает положение элементов относительно окна просмотра и выполняет анимации, когда элемент попадает в зону видимости. Атрибут data-scroll-target изменяет эту логику, позволяя:

  • Привязать элемент к определённой цели на странице.
  • Настроить относительное смещение для запуска анимации.
  • Управлять синхронизацией нескольких элементов с одним и тем же триггером.

Синтаксис прост:


  Этот блок анимируется, когда #section-3 появляется в области видимости.

Здесь элемент с data-scroll будет отслеживать позицию элемента с идентификатором #section-3, а не свою собственную.

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

Комбинируя data-scroll-target с data-scroll-class, можно создавать сложные анимации и эффекты прокрутки:


  

    Контент, активирующийся при достижении блока #features
  






  Основные возможности продукта

При достижении блока #features к

будет добавлен класс active. Это удобно для:

  • Активации CSS-анимаций.
  • Появления/исчезновения элементов.
  • Синхронизации нескольких элементов по одному триггеру.

Смещение и оффсеты

Часто необходимо запускать эффект немного раньше или позже фактического попадания цели в видимую область. Для этого можно использовать атрибут data-scroll-offset:


  Элемент активируется на 100px раньше.

Значение может быть как положительным, так и отрицательным, что позволяет гибко управлять моментом активации.

Привязка к нескольким целям

Locomotive Scroll поддерживает множественные цели, если использовать кастомный JavaScript для контроля поведения. Прямого атрибута для нескольких целей нет, но можно создать комбинацию событий через API:

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

scroll.on('call', (func, way, obj) => {
  if (obj.el.matches('#target-1, #target-2')) {
    obj.el.classList.add('visible');
  }
});

Такой подход позволяет связывать один элемент с несколькими точками триггера и динамически изменять его состояние.

Практические советы

  1. Использовать идентификаторы для целей — это гарантирует уникальность и точное срабатывание.
  2. Комбинировать с CSS-переходами — добавление класса через data-scroll-class позволяет создавать плавные эффекты.
  3. Тестировать на разных экранах — при адаптивной верстке положение целей может меняться.
  4. Не забывать про оффсеты — они полезны для согласования анимации с визуальной композицией страницы.

Совместимость с другими атрибутами Locomotive Scroll

  • data-scroll-speed — можно ускорять или замедлять анимацию элемента, сохраняя привязку к цели.
  • data-scroll-repeat — при многократной активации элемента эффект будет срабатывать каждый раз при попадании цели в область видимости.
  • data-scroll-delay — полезно для последовательного запуска нескольких элементов, привязанных к одной цели.

Визуализация работы

Представим схему:

[viewport]
  |
  |------> Элемент с data-scroll
  |
  |------> #section-3 (data-scroll-target)

Элемент реагирует не на своё попадание в область видимости, а на позицию блока #section-3. Это создаёт гибкий механизм триггеров для анимаций и интерактивных эффектов.

Оглавление