Горизонтальный параллакс

Locomotive Scroll по умолчанию ориентирован на вертикальное движение страницы. Для создания горизонтального параллакса необходимо указать направление скролла через параметр direction. Пример инициализации:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  direction: 'horizontal', // ключевой параметр для горизонтального скролла
  multiplier: 1,          // скорость скролла
});
  • el — контейнер, в котором будет применяться скролл. Обычно это обёртка для всего контента.
  • smooth: true обеспечивает плавное движение, создавая эффект инерции.
  • direction: 'horizontal' переводит скролл в горизонтальную ориентацию.
  • multiplier регулирует скорость прокрутки относительно стандартного скролла браузера. Значения >1 ускоряют движение, <1 замедляют.

Подготовка HTML и CSS для горизонтального скролла

Для корректной работы горизонтального параллакса структура HTML должна учитывать ширину контента и направление оси.

HTML:

<div id="js-scroll" data-scroll-container>
  <section class="horizontal-section">
    <div class="item" data-scroll data-scroll-speed="2">Элемент 1</div>
    <div class="item" data-scroll data-scroll-speed="-1">Элемент 2</div>
    <div class="item" data-scroll data-scroll-speed="3">Элемент 3</div>
  </section>
</div>

CSS:

#js-scroll {
  overflow: hidden; /* предотвращает стандартный скролл */
}

.horizontal-section {
  display: flex;
  flex-direction: row; /* важный момент: элементы идут в ряд */
  width: max-content;  /* контент может быть шире экрана */
}

.item {
  flex: 0 0 auto;
  width: 400px;
  height: 300px;
  margin-right: 30px;
  background-color: #ccc;
}
  • flex-direction: row позволяет элементам располагаться горизонтально.
  • width: max-content гарантирует, что контейнер не будет сжиматься под ширину окна.
  • Элементы с data-scroll-speed создают эффект параллакса при движении скролла.

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

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

  • Положительное значение data-scroll-speed ускоряет движение элемента относительно основного скролла.
  • Отрицательное значение создаёт эффект движения в противоположном направлении.
<div class="item" data-scroll data-scroll-speed="4">Быстрое движение</div>
<div class="item" data-scroll data-scroll-speed="-2">Движение назад</div>

Эффект усиливается на горизонтальном скролле за счёт инерции и плавного движения.

События и обновление размеров

При горизонтальном скролле важно следить за изменением размеров окна и контента, так как это влияет на расчёт прокрутки. Locomotive Scroll предоставляет методы:

scroll.update();       // пересчитывает позиции элементов
scroll.scrollTo(200);  // скроллит к позиции 200 по горизонтали
scroll.on('scroll', (obj) => {
  console.log(obj.scroll.x); // текущая позиция по горизонтали
});
  • scroll.update() необходимо вызывать при изменении размеров контента, например, после загрузки изображений.
  • scroll.scrollTo(value) поддерживает координаты по оси X в горизонтальном режиме.
  • Событие scroll возвращает объект с текущими координатами, что удобно для синхронизации анимаций.

Интеграция с GSAP для сложных анимаций

Для создания более динамичного параллакса элементы можно анимировать через GSAP. Locomotive Scroll и GSAP взаимодействуют через событие scroll.

import { gsap } from 'gsap';

scroll.on('scroll', (obj) => {
  gsap.to('.item', {
    x: -obj.scroll.x * 0.5, // смещение элементов относительно скролла
    ease: 'none',
  });
});
  • Коэффициент 0.5 задаёт скорость движения элемента относительно скролла.
  • Можно комбинировать несколько коэффициентов для разных слоёв и создавать слоистый параллакс.

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

  • Использовать width: max-content для контейнера обязательно, иначе элементы будут переноситься на новую строку.
  • overflow: hidden на основном контейнере предотвращает появление полос прокрутки браузера.
  • При большом количестве элементов следить за производительностью, отключая smooth для слабых устройств.
  • Проверять работу параллакса на разных разрешениях экрана, особенно на мобильных устройствах, так как горизонтальный скролл может конфликтовать с touch-свайпами.

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

Для организации больших проектов горизонтального скролла удобно использовать data-scroll-section. Это позволяет разделять контент на отдельные блоки и управлять их анимациями независимо.

<section data-scroll-section>
  <div class="item" data-scroll data-scroll-speed="2">Секция 1</div>
</section>
<section data-scroll-section>
  <div class="item" data-scroll data-scroll-speed="3">Секция 2</div>
</section>
  • Каждая секция может иметь свои стили и анимации.
  • Упрощается контроль над параллакс-эффектами для отдельных блоков.

Ключевые нюансы горизонтального параллакса

  • Инерция и smooth: плавное движение делает горизонтальный скролл более естественным, но увеличивает нагрузку на GPU.
  • data-scroll-speed: основа эффекта параллакса; комбинируется с GSAP для сложных анимаций.
  • Размеры контейнера: критично для правильного позиционирования и прокрутки.
  • Обновление скролла: scroll.update() должно вызываться при любом изменении DOM или размера окна.

Эти техники позволяют реализовать горизонтальный параллакс на уровне современного веб-дизайна с высокой производительностью и гибкой анимацией элементов.

Оглавление