Основной атрибут data-scroll

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

Подключение и базовая структура

Чтобы использовать data-scroll, необходимо инициализировать экземпляр Locomotive Scroll:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});
  • el – контейнер, внутри которого будет происходить плавный скролл.
  • smooth: true – активирует плавный скролл по умолчанию.

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

<section data-scroll data-scroll-speed="2">
  Контент с ускоренной анимацией
</section>

<div data-scroll data-scroll-delay="0.1">
  Элемент с задержкой прокрутки
</div>

Атрибуты data-scroll

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

  1. data-scroll-speed Определяет скорость движения элемента относительно скролла.

    • Положительные значения ускоряют движение вперед.
    • Отрицательные значения создают эффект обратного движения.
    <div data-scroll data-scroll-speed="3">
  Быстрый элемент
</div>

  2. data-scroll-delay Устанавливает задержку анимации относительно скролла. Используется для плавного появления элементов или создания эффекта «инерции».

    <p data-scroll data-scroll-delay="0.2">
  Плавное появление текста
</p>

  3. data-scroll-direction Определяет направление эффекта: vertical (по умолчанию) или horizontal.

    <div data-scroll data-scroll-direction="horizontal" data-scroll-speed="1">
  Горизонтальный скролл
</div>

  4. data-scroll-class Позволяет добавлять CSS-класс при попадании элемента в область видимости.

    <section data-scroll data-scroll-class="is-visible">
  Элемент получает класс при видимости
</section>

  5. data-scroll-target Задаёт привязку к другому элементу как цели скролла.

    <div data-scroll data-scroll-target="#targetElement">
  Анимация привязана к #targetElement
</div>

Принципы работы

Locomotive Scroll отслеживает положение элементов на странице и применяет к ним эффекты на основе текущего скролла. Атрибут data-scroll выполняет три основные функции:

  1. Определение элементов для наблюдения Любой элемент с data-scroll автоматически регистрируется в системе и становится объектом для анимаций и эффектов.

  2. Применение индивидуальных параметров Через дополнительные атрибуты можно задавать скорость, задержку и направление для каждого элемента.

  3. Интеграция с CSS и JS анимациями Атрибуты позволяют легко комбинировать Locomotive Scroll с анимациями через CSS-трансформации или JavaScript.

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

Пример 1: Параллакс-эффект

<div data-scroll data-scroll-speed="-2">
  Фоновый элемент с параллаксом
</div>
div[data-scroll] {
  transform: translateY(0);
  transition: transform 0.3s ease-out;
}

Пример 2: Появление при прокрутке

<section data-scroll data-scroll-class="visible">
  Контент появляется плавно
</section>
section {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
section.visible {
  opacity: 1;
}

Пример 3: Комбинация скорости и задержки

<div data-scroll data-scroll-speed="1.5" data-scroll-delay="0.1">
  Элемент с индивидуальной динамикой
</div>

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

  • Все элементы с data-scroll должны находиться внутри контейнера с data-scroll-container.
  • Атрибут data-scroll не требует значения – достаточно его присутствия.
  • Для оптимизации производительности стоит ограничивать количество элементов с активными эффектами и использовать data-scroll-class для управления анимациями через CSS.
  • Эффекты лучше комбинировать с CSS-трансформациями (translate, scale, opacity) вместо изменения позиции через top или left, чтобы избежать лишнего пересчёта layout.

События и интеграция с JavaScript

Locomotive Scroll предоставляет API для работы с элементами data-scroll:

scroll.on('scroll', (args) => {
  console.log(args); // информация о текущем положении скролла
});

scroll.on('call', (func, way, obj) => {
  if(func === 'animate') {
    console.log(way, obj.el); // триггер для анимаций
  }
});
  • scroll.on('scroll', callback) – вызывается на каждом обновлении скролла.
  • scroll.on('call', callback) – срабатывает при попадании элемента с data-scroll-call (расширение data-scroll для коллбеков).

Заключение по атрибуту data-scroll

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

Оглавление