data-scroll-delay

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

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

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

Формула поведения:

позиция_элемента = текущая_позиция + (целевая_позиция - текущая_позиция) * delay
  • текущая_позиция — фактическое текущее смещение элемента на экране;
  • целевая_позиция — координата, которую элемент должен занять согласно скроллу;
  • delay — значение из data-scroll-delay (например, 0.1, 0.5, 1).

Малые значения создают плавное, почти моментальное следование за скроллом, большие — заметную «инерцию».

Синтаксис

<div data-scroll data-scroll-delay="0.3">
    Контент с задержкой
</div>
  • data-scroll — обязательный атрибут для инициализации прокрутки;
  • data-scroll-delay — числовое значение, определяющее коэффициент задержки. Значение может быть дробным от 0 до 1 и выше, где 0.1 — минимальная задержка, 1 — полный отклик с сильной инерцией.

Влияние на анимации

Использование data-scroll-delay особенно полезно в сочетании с CSS-анимациями и трансформациями. Эффекты включают:

  1. Плавное смещение — элемент «догоняет» скролл, создавая ощущение объема.
  2. Постепенное появление — задержка позволяет анимировать opacity или transform с замедлением.
  3. Слои с разной скоростью — комбинируется с data-scroll-speed, создавая эффект параллакса с разной инерцией.

Пример CSS для эффекта задержки:

[data-scroll] {
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

[data-scroll].is-inview {
    transform: translateY(0);
    opacity: 1;
}

Вместе с data-scroll-delay="0.2" элемент будет плавно появляться после входа в область видимости.

Практические рекомендации

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

Использование слишком больших значений может привести к ощущению «тормозящего» интерфейса, особенно на мобильных устройствах.

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

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

Советы по производительности

  • Элементы с высокой задержкой могут создавать нагрузку при большом количестве блоков на странице.
  • Для оптимизации рекомендуется использовать data-scroll-delay только на ключевых визуальных элементах.
  • Комбинация с GPU-ускорением (transform: translate3d) снижает нагрузку на браузер и делает анимации более плавными.

Пример комплексного применения

<section class="hero">
    <h1 data-scroll data-scroll-delay="0.2" data-scroll-class="inview">
        Заголовок с задержкой
    </h1>
    <p data-scroll data-scroll-delay="0.4" data-scroll-class="inview">
        Подзаголовок с более заметной задержкой
    </p>
    <div data-scroll data-scroll-delay="0.6" data-scroll-speed="2">
        Иллюстрация с эффектом параллакса
    </div>
</section>

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

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

Оглавление