data-scroll-delay для появления элементов

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

Основные принципы работы data-scroll-delay

Атрибут data-scroll-delay применяется к элементу, у которого задан эффект появления через data-scroll (например, data-scroll="enter" или кастомный эффект). Его значение указывается в секундах и определяет, на сколько отсрочено срабатывание анимации после того, как элемент входит в зону видимости.

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

<div data-scroll data-scroll-delay="0.3" data-scroll-speed="1">
  Контент с задержкой
</div>
  • data-scroll — активирует обработку элемента библиотекой.
  • data-scroll-delay="0.3" — анимация начнется через 0.3 секунды после появления элемента.
  • data-scroll-speed="1" — стандартная скорость скролла (можно варьировать для параллакс-эффекта).

Важно: задержка не останавливает скролл, она лишь влияет на момент запуска анимации.

Взаимодействие с другими атрибутами

data-scroll-delay особенно эффективен в сочетании с:

  1. data-scroll-class — позволяет добавить CSS-класс с анимацией через определенное время.
<div data-scroll data-scroll-class="visible" data-scroll-delay="0.5">
  Анимированный блок
</div>

CSS:

div {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

div.visible {
  opacity: 1;
  transform: translateY(0);
}
  1. data-scroll-repeat — дает возможность повторного срабатывания анимации при повторном входе элемента в зону видимости.
<div data-scroll data-scroll-delay="0.2" data-scroll-repeat>
  Повторяющийся элемент
</div>

Эффект: элемент плавно появляется с заданной задержкой каждый раз, когда его видимость пересекает границу скролла.

  1. data-scroll-speed — для создания параллакс-эффектов совместно с задержкой появления. Более высокий или отрицательный speed может усилить ощущение динамики при появлении элементов.

Настройка последовательного появления нескольких элементов

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

Пример:

<ul>
  <li data-scroll data-scroll-delay="0.1">Элемент 1</li>
  <li data-scroll data-scroll-delay="0.2">Элемент 2</li>
  <li data-scroll data-scroll-delay="0.3">Элемент 3</li>
  <li data-scroll data-scroll-delay="0.4">Элемент 4</li>
</ul>
  • Каждый элемент появится с небольшой задержкой относительно предыдущего.
  • Эффект особенно полезен для списков, карточек и элементов портфолио.

Для динамического списка можно генерировать значения задержки через Jav * aScript:

const items = document.querySelectorAll('ul li');
items.forEach((item, index) => {
  item.setAttribute('data-scroll-delay', (index * 0.1).toFixed(1));
});

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

  • Малые значения задержки (0.05–0.2 с) — подходят для элементов внутри одного блока, создавая эффект лёгкого каскада.
  • Средние значения (0.3–0.5 с) — для более заметного последовательного появления, хорошо смотрятся на больших секциях.
  • Большие значения (0.6–1 с и выше) — для акцентных элементов, когда нужно задержать внимание пользователя.
  • Совмещать с CSS-переходами для мягкой анимации.
  • Проверять визуальный эффект на разных скоростях прокрутки, особенно при data-scroll-speed, чтобы избежать разрыва анимации.

Примеры сложных комбинаций

Появление с разной скоростью и задержкой:

<div data-scroll data-scroll-speed="2" data-scroll-delay="0.1" data-scroll-class="visible">Блок 1</div>
<div data-scroll data-scroll-speed="1.5" data-scroll-delay="0.3" data-scroll-class="visible">Блок 2</div>
<div data-scroll data-scroll-speed="1" data-scroll-delay="0.5" data-scroll-class="visible">Блок 3</div>
  • Блоки будут появляться в каскадном порядке.
  • Более высокий speed создаст впечатление, что элементы движутся быстрее по мере появления.

Комбинация с повторяющейся анимацией и задержкой:

<div data-scroll data-scroll-delay="0.2" data-scroll-repeat data-scroll-class="active">
  Анимация при каждом входе
</div>
  • Анимация сработает каждый раз, когда элемент пересечет границу видимости.
  • data-scroll-delay обеспечивает контроль момента начала анимации.

Вывод

data-scroll-delay в Locomotive Scroll позволяет управлять моментом запуска анимации, создавать последовательные эффекты, улучшать динамику интерфейса и контролировать визуальное восприятие элементов при скролле. Комбинируя его с другими атрибутами (data-scroll-class, data-scroll-speed, data-scroll-repeat), можно добиться плавного, естественного и впечатляющего UX без сложного JavaScript-кода.

Оглавление