Лендинги с секциями

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

npm install locomotive-scroll

После установки импортируется класс и создаётся экземпляр:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  multiplier: 1,
  lerp: 0.1
});

Ключевые параметры:

  • el — контейнер с контентом, к которому применяется скролл. Обычно это блок с overflow: hidden.
  • smooth — включает плавный скроллинг.
  • multiplier — скорость скролла, где 1 — стандартная, 2 — в два раза быстрее.
  • lerp — коэффициент сглаживания для инерции движения.

Контейнер должен содержать атрибут data-scroll-container для корректной работы:

<div id="js-scroll" data-scroll-container>
  <section>Секция 1</section>
  <section>Секция 2</section>
  <section>Секция 3</section>
</div>

Работа с секциями

Каждая секция лендинга может иметь собственные анимации при появлении в области видимости. Для этого используется атрибут data-scroll и опционально data-scroll-speed или data-scroll-delay.

<section data-scroll data-scroll-speed="2">
  <h2>Заголовок с ускорением</h2>
</section>

<section data-scroll data-scroll-delay="0.2">
  <p>Текст с задержкой анимации</p>
</section>

Пояснения:

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

События скролла

Locomotive Scroll предоставляет возможность реагировать на события:

scroll.on('scroll', (instance) => {
  console.log(instance.scroll.y); // Текущая позиция скролла по Y
});

scroll.on('call', (func, way, obj) => {
  console.log(func, way, obj); // Вызов при достижении элемента с data-scroll-call
});

События позволяют:

  • Отслеживать позицию скролла.
  • Запускать анимации при входе/выходе элементов.
  • Создавать интерактивные секции с эффектами параллакса.

Анимации с использованием IntersectionObserver

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

const sections = document.querySelectorAll('section');

sections.forEach(section => {
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        section.classList.add('active');
      } else {
        section.classList.remove('active');
      }
    });
  }, { threshold: 0.5 });

  observer.observe(section);
});

Добавление классов к секциям позволяет управлять CSS-анимациями через трансформации, opacity, translateY и scale.

Настройка параллакса

Параллакс создаётся через data-scroll-speed для элементов внутри секции. Пример:

<section class="hero">
  <h1 data-scroll data-scroll-speed="3">Главный заголовок</h1>
  <img src="background.jpg" data-scroll data-scroll-speed="-1" />
</section>

Принцип работы:

  • Заголовок движется быстрее основного скролла (3).
  • Фоновое изображение замедляется (-1), создавая эффект глубины.

Для более точного контроля можно комбинировать data-scroll-direction (vertical или horizontal) и data-scroll-target, чтобы ограничить эффект конкретными контейнерами.

Ленивая загрузка контента и перезагрузка скролла

При динамическом добавлении контента необходимо уведомлять Locomotive Scroll о новых элементах:

scroll.update();

Это важно для лендингов с секциями, которые подгружаются по мере скролла или появляются при клике на кнопку.

Примеры продвинутых эффектов

  1. Секционный параллакс с картинками и текстом
<section class="section">
  <div data-scroll data-scroll-speed="2" class="text">Текст</div>
  <div data-scroll data-scroll-speed="-2" class="image"><img src="img.jpg" /></div>
</section>
  1. Горизонтальный скролл в вертикальной прокрутке
<section class="horizontal">
  <div data-scroll-container>
    <div data-scroll-section style="display: flex;">
      <div data-scroll data-scroll-speed="1">Блок 1</div>
      <div data-scroll data-scroll-speed="2">Блок 2</div>
      <div data-scroll data-scroll-speed="3">Блок 3</div>
    </div>
  </div>
</section>
  1. Эффект “плавающего” текста
<p data-scroll data-scroll-speed="0.5" data-scroll-delay="0.1">Плавный текст</p>

Элементы с небольшой скоростью создают ощущение лёгкого движения, а с задержкой — более плавное появление при прокрутке.

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

  • Для тяжелых страниц рекомендуется использовать requestAnimationFrame только для ключевых анимаций.
  • Не перегружать DOM большим количеством элементов с data-scroll-speed.
  • Сократить использование сложных теней и фильтров на элементах с высоким параллакс-эффектом.
  • Вызывать scroll.update() только после добавления или удаления контента, чтобы избежать лишних перерасчётов.

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

Locomotive Scroll легко комбинируется с:

  • GSAP для плавных анимаций с точным таймингом.
  • Splitting.js для анимации текста по буквам или словам.
  • Barba.js для плавных переходов между страницами с сохранением состояния скролла.

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

gsap.to('.text', {
  scrollTrigger: {
    trigger: '.text',
    scroller: '#js-scroll',
    start: 'top 80%',
    end: 'bottom 20%',
    scrub: true
  },
  y: -100,
  opacity: 1
});

Использование scroller: '#js-scroll' позволяет синхронизировать Locomotive Scroll с GSAP ScrollTrigger.

Оглавление