Вертикальный параллакс

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

Инициализация библиотеки

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

import LocomotiveScroll from 'locomotive-scroll';

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

Пояснения параметров:

  • el — DOM-элемент, внутри которого будет происходить скроллинг.
  • smooth — включает плавную анимацию прокрутки.
  • direction — задаёт направление скроллинга (vertical по умолчанию).

Настройка элементов для параллакса

Чтобы создать эффект параллакса, к элементам добавляют специальные атрибуты data-scroll и data-scroll-speed.

<div class="parallax-element" data-scroll data-scroll-speed="2">
  Быстро движущийся текст
</div>
<div class="parallax-element" data-scroll data-scroll-speed="-1">
  Медленно движущийся фон
</div>

Ключевые моменты:

  • data-scroll сообщает библиотеке, что элемент участвует в скроллинге.
  • data-scroll-speed задаёт скорость движения относительно основной прокрутки. Положительное значение ускоряет движение, отрицательное замедляет.

Использование data-scroll-direction

Для вертикального параллакса можно явно указать направление движения элемента с помощью data-scroll-direction="vertical". Это особенно важно, если на странице одновременно используется горизонтальный скролл:

<div class="vertical-parallax" data-scroll data-scroll-speed="3" data-scroll-direction="vertical">
  Элемент с вертикальным параллаксом
</div>

Если атрибут data-scroll-direction не указан, библиотека по умолчанию применяет направление, указанное при инициализации (direction: 'vertical').

Программное управление параллаксом

Locomotive Scroll позволяет управлять смещением элементов через методы JavaScript. Это полезно для динамического изменения скорости или координат:

scroll.on('scroll', (instance) => {
  const progress = instance.scroll.y / document.body.scrollHeight;
  const element = document.querySelector('.dynamic-parallax');
  element.style.transform = `translateY(${progress * 100}px)`;
});

Объяснение:

  • instance.scroll.y — текущее вертикальное смещение.
  • document.body.scrollHeight — общая высота страницы.
  • Пропорциональное смещение позволяет добиться плавного параллакс-эффекта без скачков.

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

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

.parallax-element {
  will-change: transform;
  transition: transform 0.3s ease-out;
}

Использование will-change: transform оптимизирует рендеринг, снижает нагрузку на браузер и делает анимацию более плавной.

Параллакс на фонах

Особое применение вертикального параллакса — фоны, которые движутся медленнее контента:

<section class="section">
  <div class="background" data-scroll data-scroll-speed="-2"></div>
  <div class="content">
    Контент поверх медленно движущегося фона
  </div>
</section>

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

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

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

scroll.on('call', (func, dir, el) => {
  if (func === 'fadeIn') {
    el.classList.add('visible');
  }
});
  • call срабатывает на элементах с атрибутом data-scroll-call="fadeIn".
  • dir указывает направление скролла (up или down).
  • el — целевой DOM-элемент.

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

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

  • Ограничить количество элементов с data-scroll-speed.
  • Использовать will-change: transform для GPU-ускорения.
  • Минимизировать сложные CSS-анимации внутри параллакс-элементов.
  • Разделять тяжелые блоки на секции, чтобы скролл оставался плавным.

Совместимость с другими библиотеками

Locomotive Scroll легко интегрируется с GSAP или Anime.js для сложных анимаций:

import { gsap } from 'gsap';

scroll.on('scroll', (instance) => {
  gsap.to('.gsap-parallax', {
    y: instance.scroll.y * 0.5,
    ease: 'power1.out'
  });
});

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

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

Оглавление