Управление скоростью отдельных блоков

Locomotive Scroll предоставляет возможность детальной настройки поведения прокрутки для отдельных элементов страницы, включая изменение их скорости относительно основной прокрутки. Такой подход позволяет создавать эффект параллакса или локально ускорять/замедлять движение контента, не затрагивая всю страницу.

Атрибут data-scroll-speed

Для задания индивидуальной скорости блокам используется атрибут data-scroll-speed. Его значение определяется числом, где:

  • Положительное значение (>0) ускоряет движение блока относительно скролла.
  • Отрицательное значение (<0) заставляет элемент двигаться в противоположном направлении.
  • Значение 1 соответствует базовой скорости прокрутки (без ускорения).

Пример:

<section data-scroll data-scroll-speed="2">
  Быстро движущийся блок
</section>

<section data-scroll data-scroll-speed="-1">
  Блок, движущийся против прокрутки
</section>

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

Инициализация и привязка к DOM

Перед использованием атрибутов необходимо инициализировать Locomotive Scroll на контейнере страницы. Обычно это делается так:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1, // базовая скорость всей прокрутки
});
  • el — основной контейнер с контентом, внутри которого будут работать все блоки с data-scroll.
  • smooth: true включает плавную прокрутку.
  • multiplier задаёт базовую скорость скролла для всей страницы; отдельные блоки будут масштабироваться относительно этого значения.

Управление скоростью через JavaScript

Помимо атрибута data-scroll-speed, скорость можно менять динамически через API Locomotive Scroll:

const block = document.querySelector('.dynamic-speed-block');
scroll.update(); // обновляет состояние скролла
scroll.scrollTo(block, {
  offset: 0,
  duration: 2000,
  easing: [0.25, 0.00, 0.35, 1.00]
});

Для изменения скорости блока на лету можно использовать CSS-переменные в сочетании с data-scroll-speed:

[data-scroll-speed] {
  transition: transform 0.5s ease-out;
}
block.setAttribute('data-scroll-speed', '3'); // ускоряем блок
scroll.update(); // пересчитываем позиции

Использование с параллакс-эффектами

Эффект параллакса достигается при сочетании скорости блока и позиции родителя. Например, для фонового изображения:

<div class="parallax-container" data-scroll>
  <div class="parallax-bg" data-scroll data-scroll-speed="-2"></div>
</div>
  • parallax-bg будет перемещаться медленнее, создавая иллюзию глубины.
  • Отрицательное значение скорости позволяет элементу двигаться в противоположном направлении при прокрутке.

Ограничения и рекомендации

  1. Не злоупотреблять большими значениями скорости: слишком высокая скорость может вызвать визуальные рывки и нагружать рендеринг.
  2. Использовать scroll.update() после динамических изменений: это обязательно для корректного пересчёта положения элементов.
  3. Комбинировать с data-scroll-target, если блок должен двигаться относительно определённого контейнера, а не всей страницы:
<div class="section" data-scroll data-scroll-target=".wrapper" data-scroll-speed="1.5"></div>
  • data-scroll-target позволяет задать, относительно какого контейнера рассчитывать движение.

Советы по оптимизации

  • Ограничивать количество элементов с высокой скоростью на странице.
  • Для сложных анимаций использовать requestAnimationFrame совместно с API Locomotive Scroll.
  • Проверять производительность на мобильных устройствах: эффекты параллакса и высокая скорость блоков сильно влияют на FPS.

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

Оглавление