data-scroll-speed

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

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

Для начала требуется инициализация Locomotive Scroll на контейнере страницы. Обычно контейнер имеет класс .scroll-container:

import LocomotiveScroll from 'locomotive-scroll';

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

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

<div class="scroll-container">
  <section data-scroll-section>
    <div data-scroll data-scroll-speed="2">Быстрый элемент</div>
    <div data-scroll data-scroll-speed="-1">Медленный элемент</div>
    <div data-scroll data-scroll-speed="0.5">Элемент с половинной скоростью</div>
  </section>
</div>
  • Положительные значения (2, 3) ускоряют движение элемента относительно прокрутки.
  • Отрицательные значения (-1, -2) замедляют движение и могут создавать эффект обратного смещения.
  • Значения меньше 1 (0.5) замедляют движение элемента, создавая более плавное и легкое смещение.

Механизм работы

Locomotive Scroll на основе data-scroll-speed вычисляет смещение элемента относительно стандартного скролла. Основная формула для смещения:

elementOffset = scrollPosition * speed

где:

  • scrollPosition — текущая позиция скролла контейнера,
  • speed — значение data-scroll-speed.

Это означает, что элемент с data-scroll-speed="2" будет смещаться вдвое быстрее, чем обычный скролл, а элемент с data-scroll-speed="-1" — в противоположном направлении при том же скролле.

Настройка через CSS и transform

Для оптимизации плавности и производительности Locomotive Scroll использует transform: translate3d вместо изменения top или margin. Это позволяет использовать GPU-ускорение и минимизировать нагрузку на рендеринг.

Пример эффекта параллакса с разными скоростями:

[data-scroll-speed] {
  will-change: transform;
}

Использование will-change: transform предупреждает браузер о том, что элемент будет часто изменять трансформацию, что улучшает производительность анимации.

Комбинация с data-scroll-direction

Атрибут data-scroll-speed может комбинироваться с data-scroll-direction для контроля направления движения:

<div data-scroll data-scroll-speed="3" data-scroll-direction="horizontal">
  Горизонтальное ускорение
</div>
  • vertical (по умолчанию) — движение по вертикали.
  • horizontal — движение по горизонтали. Полезно для слайдеров или горизонтальных секций.

Работа с динамическими элементами

Если элементы создаются динамически через JavaScript, их необходимо обновлять после добавления в DOM:

scroll.update();

Это гарантирует, что Locomotive Scroll учтёт все новые элементы с атрибутом data-scroll-speed и применит корректные трансформации.

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

  1. Избегать слишком больших значений: значения выше 5 могут создавать резкие скачки и «дрожание» элементов.
  2. Использовать дробные значения для тонких эффектов (0.3, 0.7) — создаёт более естественное ощущение глубины.
  3. Комбинировать с data-scroll-offset для контроля начала эффекта параллакса.
  4. Тестировать на мобильных устройствах, так как высокие значения скорости могут быть излишне резкими на небольших экранах.

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

<section data-scroll-section>
  <div data-scroll data-scroll-speed="1.5">Элемент 1</div>
  <div data-scroll data-scroll-speed="-0.5">Элемент 2</div>
  <div data-scroll data-scroll-speed="2.5" data-scroll-direction="horizontal">Элемент 3</div>
</section>
  • Первый элемент движется чуть быстрее базового скролла.
  • Второй элемент движется медленнее и в обратном направлении.
  • Третий элемент ускоряется и двигается горизонтально, создавая эффект «выскальзывания».

Интеграция с анимациями

Часто data-scroll-speed используется совместно с анимациями через GSAP или CSS-переходы для создания комплексного визуального эффекта:

gsap.to('.animated-element', {
  y: () => window.scrollY * 0.5,
  ease: 'power1.out'
});

При этом Locomotive Scroll обеспечивает базовую прокрутку и параллакс, а GSAP управляет дополнительными эффектами, синхронизированными со скоростью скролла.

Итоговое применение

Использование data-scroll-speed позволяет реализовать:

  • Параллакс-эффекты для фонов и элементов интерфейса.
  • Элементы с индивидуальной скоростью движения.
  • Горизонтальные и вертикальные смещения в зависимости от направления скролла.
  • Плавное взаимодействие с анимациями при комплексной верстке.

Правильное понимание механизма работы и комбинаций значений data-scroll-speed позволяет создавать визуально богатые страницы с контролируемым и отзывчивым параллаксом.

Оглавление