Комбинация с параллаксом

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

Для реализации параллакса используется атрибут data-scroll, а также дополнительные атрибуты: data-scroll-speed, data-scroll-direction, data-scroll-target.

  • data-scroll-speed – задаёт скорость движения элемента относительно стандартного скролла.

    • Значение > 0 — элемент движется быстрее скролла.
    • Значение < 0 — элемент движется медленнее, создавая эффект «отставания» или «подпрыгивания».

  • data-scroll-direction — направление движения (vertical или horizontal).

  • data-scroll-target — задаёт контейнер, к которому применяется эффект скролла, если требуется нестандартный блок.

Пример базового параллакса:

<div data-scroll-container>
  <section>
    <h1 data-scroll data-scroll-speed="2">Заголовок</h1>
    <p data-scroll data-scroll-speed="-1">Текст с эффектом параллакса</p>
  </section>
</div>

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

Настройка горизонтального параллакса

Locomotive Scroll позволяет использовать горизонтальный скролл, который часто применяется для эффектов прокрутки каруселей или интерактивных панелей. Для этого контейнер должен иметь свойство data-scroll-direction="horizontal", а дочерние элементы получают индивидуальные скорости.

<div data-scroll-container data-scroll-direction="horizontal">
  <div data-scroll data-scroll-speed="3">Слайд 1</div>
  <div data-scroll data-scroll-speed="1">Слайд 2</div>
  <div data-scroll data-scroll-speed="-2">Слайд 3</div>
</div>

Важно помнить, что горизонтальный параллакс требует правильного расчёта ширины контейнера и установки CSS overflow-x: hidden для страницы или родительского блока, чтобы исключить появление полос прокрутки браузера.

Взаимодействие с анимациями

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

Пример интеграции с GSAP:

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

scroll.on('scroll', (obj) => {
  gsap.to('.animate-box', {
    y: obj.scroll.y * 0.3,
    duration: 0.5
  });
});

Здесь элемент .animate-box сдвигается пропорционально текущему скроллу, создавая плавный параллакс эффект. Преимущество такого подхода в том, что можно синхронизировать движение нескольких объектов с разными коэффициентами скорости, создавая реалистичную глубину сцены.

Использование триггеров и блоков

Для более сложных интерфейсов важно разделять контент на блоки с независимым параллаксом. Атрибут data-scroll-sticky позволяет закрепить элемент на время прокрутки родительского блока, что особенно полезно для «прилипших» заголовков или интерактивных панелей.

<section data-scroll-section>
  <div data-scroll data-scroll-sticky data-scroll-target="#section1">
    Прилипший элемент
  </div>
  <div id="section1">Контент секции</div>
</section>

При использовании data-scroll-sticky элемент остаётся видимым на протяжении всего блока и может взаимодействовать с другими параллакс элементами, создавая эффект слоёв, движущихся независимо друг от друга.

Комбинирование вертикального и горизонтального параллакса

Locomotive Scroll поддерживает сочетание разных направлений движения и скоростей одновременно. Например, можно сделать фон, движущийся медленно по вертикали, и элементы интерфейса, скользящие по горизонтали. Для этого каждый элемент получает свои атрибуты:

<div data-scroll-container>
  <div data-scroll data-scroll-speed="-2">Фон</div>
  <div data-scroll data-scroll-speed="1" data-scroll-direction="horizontal">Меню</div>
</div>

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

Оптимизация производительности

Для плавного параллакса важно учитывать производительность:

  • Использовать will-change: transform для элементов с анимацией.
  • Ограничивать количество одновременно анимируемых элементов.
  • Минимизировать пересчёт стилей и layout в CSS.
  • Включать smooth: true в настройках Locomotive Scroll для аппаратного ускорения.

Эти меры предотвращают подтормаживания на мобильных устройствах и обеспечивают чистую и плавную анимацию.

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

Оглавление