Сложные многослойные эффекты

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


  Быстро двигающийся слой





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

Элементы с разными скоростями можно накладывать друг на друга для создания эффекта многослойной перспективы.

Координация нескольких слоев

Для сложной сцены с несколькими слоями необходимо учитывать порядок слоев и их контекст. Каждый слой должен быть обернут в контейнер с атрибутом data-scroll-container:
  • layer-back двигается медленнее, создавая эффект глубины.
  • layer-front ускоряет движение, усиливая ощущение динамики.
  • Контейнер обеспечивает правильный расчет позиции каждого слоя, особенно при использовании вертикального и горизонтального скролла одновременно.

Применение горизонтальной прокрутки для слоев

Locomotive Scroll поддерживает горизонтальный скролл через установку атрибута data-direction="horizontal" на контейнере:


  
Слой 1

  
Слой 2
  • Горизонтальный скролл позволяет создавать эффект движения слоев в разных направлениях.
  • Сочетание вертикальных и горизонтальных слоев внутри одного проекта требует тщательного расчета скорости каждого слоя.

Синхронизация анимаций с прокруткой

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

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

scroll.on('scroll', (obj) => {
  gsap.to('.animated-layer', {
    y: obj.scroll.y * 0.5,
    rotation: obj.scroll.y * 0.1
  });
});
  • obj.scroll.y предоставляет текущую позицию скролла, которую можно использовать для сложных трансформаций.
  • Использование GSAP с requestAnimationFrame внутри обработчика позволяет избежать лагов при тяжелых сценах с множеством слоев.

Управление видимостью и триггерами

Атрибуты data-scroll-call и data-scroll-repeat позволяют запускать анимации при попадании элемента в область видимости:


  Элемент с триггером анимации

scroll.on('call', (func, obj) => {
  if(func === 'fadeInLayer') {
    gsap.to(obj.el, { opacity: 1, duration: 1 });
  }
});
  • data-scroll-repeat повторяет анимацию при повторном скролле, создавая эффект «живой» сцены.
  • С помощью комбинации скорости слоев и триггеров можно создавать динамичные, интерактивные фоны.

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

Сложные многослойные эффекты могут сильно нагружать браузер. Основные подходы к оптимизации:

  1. Аппаратное ускорение Использование transform: translate3d(0,0,0) для слоев, чтобы GPU выполнял анимацию.
  2. Ограничение количества одновременно анимируемых элементов Для тяжелых сцен оставлять активными только видимые слои.
  3. Debounce для событий скролла вне Locomotive Scroll Встроенный механизм Locomotive Scroll уже оптимизирует, но сторонние обработчики могут создавать лаги.
  4. Ленивая загрузка медиа Изображения и видео на задних слоях загружать по мере прокрутки.

Использование масок и клиппингов

Для создания эффекта «слоистого окна» можно комбинировать CSS clip-path с атрибутами прокрутки:


  

.layer-mask {
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
  • Элементы с масками создают ощущение движения через форму.
  • Отлично подходит для интерактивных переходов между сценами.

Примеры сложных комбинаций

  1. Фон + текст + интерактивные объекты

    • Фон: скорость -2
    • Текст: скорость 0
    • Объекты переднего плана: скорость 3 Это создает ощущение трехмерной сцены.

  2. Вертикальные и горизонтальные слои одновременно

    • Вертикальный контейнер с data-direction="vertical"
    • Внутри горизонтальные секции с data-direction="horizontal" Такой подход дает эффект «панорамирования» при скролле.

  3. Слой с триггерной анимацией

    • Элементы переднего плана появляются только при достижении определенного скролл-позиции
    • Эффект усиливается за счет параллакса заднего плана
Оглавление