Синхронизация с CSS-переходами

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

Инициализация Locomotive Scroll

Для начала необходимо подключить библиотеку и инициализировать скролл:

import LocomotiveScroll fr om 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  multiplier: 1.0, // скорость прокрутки
  class: 'is-reveal' // класс для видимых элементов
});
  • el — контейнер скролла.
  • smooth — включает плавный скролл.
  • multiplier — регулирует ускорение прокрутки.
  • class — добавляется к элементам при их появлении.

Важно, что Locomotive Scroll не модифицирует DOM элементов, а работает через transform, поэтому анимации на основе CSS-переходов необходимо синхронизировать с прокруткой вручную.

Использование data-scroll атрибутов

Для управления анимациями через CSS применяются специальные атрибуты:

  • data-scroll — включает элемент в обработку Locomotive Scroll.
  • data-scroll-speed — скорость движения относительно скролла (параллакс).
  • data-scroll-delay — задержка эффекта при плавной прокрутке.
  • data-scroll-class — класс, который добавляется при достижении элемента видимой области.

Пример параллакса:

<div data-scroll data-scroll-speed="2" class="parallax-item">
  Параллакс контент
</div>
.parallax-item {
  transition: transform 0.5s ease-out;
}

Locomotive Scroll автоматически применяет transform к элементу, а CSS-переход плавно интерполирует изменения.

События прокрутки для контроля анимаций

Locomotive Scroll предоставляет ряд событий для точной синхронизации:

  • scroll — срабатывает при каждом обновлении скролла.
  • call — срабатывает, когда элемент пересекает заданный порог.
  • scrollTo — позволяет программно перемещать скролл к элементу.

Пример использования события scroll для управления CSS-анимацией:

scroll.on('scroll', (obj) => {
  const { scroll, lim it } = obj; // текущее положение скролла и общий лимит
  const progress = scroll / limit; // нормализованный прогресс от 0 до 1

  document.querySelector('.animated-box').style.opacity = progress;
  document.querySelector('.animated-box').style.transform = `translateY(${50 * (1 - progress)}px)`;
});
  • Преимущество: точная синхронизация CSS-переходов с прокруткой без использования сторонних анимационных библиотек.
  • Важно: для плавного результата рекомендуется использовать requestAnimationFrame внутри обработчиков событий с высокой частотой.

Использование data-scroll-position и CSS-переменных

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

<div class="fade-box" data-scroll data-scroll-call="fade"></div>
.fade-box {
  opacity: var(--opacity, 0);
  transform: translateY(calc(var(--translate, 50px)));
  transition: opacity 0.4s ease, transform 0.4s ease;
}
scroll.on('call', (value, way, obj) => {
  if (value === 'fade') {
    const progress = obj.progress; // прогресс видимости элемента
    obj.el.style.setProperty('--opacity', progress);
    obj.el.style.setProperty('--translate', 50 * (1 - progress) + 'px');
  }
});
  • obj.progress — нормализованный прогресс видимости элемента.
  • Такой подход позволяет создавать сложные CSS-анимации, полностью управляемые скроллом, без использования JavaScript-анимаций.

Синхронизация с transition и animation

  1. Плавный вход элемента: комбинируется с opacity и transform.
  2. Прокрутка-зависимая анимация: прогресс скролла напрямую меняет CSS-переменные.
  3. Комбинирование с @keyframes:
@keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.scroll-item.is-reveal {
  animation: slideIn 0.5s forwards;
}

Locomotive Scroll добавляет класс is-reveal при появлении элемента в области видимости, автоматически синхронизируя момент запуска анимации.

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

  • Для элементов с transition важно задавать начальное состояние через CSS, а не через inline стили.
  • Использование data-scroll-speed эффективно для параллакса, но нужно избегать слишком больших значений, чтобы не было резких рывков.
  • Для сложных анимаций нескольких элементов одновременно рекомендуется управлять CSS-переменными через события scroll вместо прямой модификации стилей.
  • Всегда учитывать производительность: слишком частое изменение стилей или анимаций на больших страницах может вызвать лаги. Использование will-change: transform и requestAnimationFrame помогает минимизировать нагрузку.

Интеграция с другими библиотеками

Locomotive Scroll хорошо сочетается с библиотеками, управляющими анимациями, такими как GSAP, где можно использовать событие scroll для обновления таймлайнов:

scroll.on('scroll', (obj) => {
  gsap.to('.box', { y: obj.scroll * 0.5 });
});
  • Плюс: полный контроль прогресса анимации через прокрутку.
  • Минус: необходимо следить за производительностью при больших сценах и множестве объектов.

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

Оглавление