Переопределение базового поведения

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

npm install locomotive-scroll

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

import LocomotiveScroll from 'locomotive-scroll';

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

Ключевые параметры инициализации:

  • el — контейнер, на котором будет работать прокрутка. Обычно это блок с атрибутом data-scroll-container.
  • smooth — включает плавную прокрутку.
  • multiplier — множитель скорости скролла.
  • class — CSS-класс, который будет добавляться элементам при попадании в область видимости.

Понимание базового поведения

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

  • Сглаживать прокрутку и делать анимации более плавными.
  • Добавлять эффекты при попадании элементов в область видимости, используя атрибут data-scroll.
  • Контролировать направление прокрутки, включая горизонтальные эффекты через опцию direction.

Примеры атрибутов:

<div data-scroll data-scroll-speed="2">Элемент с ускоренной прокруткой</div>
<div data-scroll data-scroll-delay="0.5">Элемент с задержкой анимации</div>
  • data-scroll-speed — задает скорость движения элемента относительно прокрутки.
  • data-scroll-delay — задержка при анимации, имитирующая инерцию.

Переопределение стандартных событий скролла

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

  1. on(event, callback) — добавляет обработчик для событий: scroll, call, call:enter, call:exit.
scroll.on('scroll', (obj) => {
  console.log(obj.scroll.y); // текущая позиция по вертикали
});

scroll.on('call', (func, dir, obj) => {
  if(func === 'myFunction') {
    console.log('Элемент вызвал call:', dir);
  }
});

  1. update() — обновляет внутренние расчеты, полезно при динамическом изменении контента.

  2. scrollTo(target, options) — программное управление скроллом:

scroll.scrollTo('#section2', {
  offset: -100,
  duration: 2000,
  easing: [0.25, 0.00, 0.35, 1.00]
});

Параметры метода:

  • target — CSS-селектор, DOM-элемент или координата.
  • offset — смещение относительно начала элемента.
  • duration — длительность анимации в миллисекундах.
  • easing — кривая ускорения для анимации.

Кастомизация поведения элементов

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

<div data-scroll data-scroll-speed="3" data-scroll-direction="horizontal">
  Горизонтальный скролл
</div>
  • data-scroll-direction — направление движения: vertical или horizontal.

Анимации при попадании в видимую область:

scroll.on('call', (func, dir, obj) => {
  if(func === 'fadeIn') {
    obj.el.style.opacity = 1;
    obj.el.style.transform = 'translateY(0)';
  }
});

Для более сложных анимаций используется комбинация data-scroll, CSS-переходов и JavaScript.

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

При большом количестве элементов важно оптимизировать прокрутку:

  • Использовать data-scroll-repeat для повторных анимаций только если необходимо.
  • Минимизировать количество обработчиков scroll на каждом элементе.
  • Вызывать update() после динамического изменения контента.

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

Locomotive Scroll отлично сочетается с GSAP, Anime.js и другими инструментами:

import gsap from 'gsap';

scroll.on('scroll', (obj) => {
  gsap.to('.box', {
    y: obj.scroll.y / 2,
    duration: 1
  });
});

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

Работа с событиями пользовательского ввода

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

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1, // сглаживание инерции
  smartphone: {
    smooth: false
  },
  tablet: {
    smooth: true
  }
});
  • lerp — коэффициент интерполяции движения. Меньшее значение делает скролл более инерционным.
  • smartphone / tablet — отдельные настройки для мобильных устройств.

Расширение функционала

Можно полностью переопределить поведение скролла для отдельных блоков:

scroll.on('scroll', (obj) => {
  const customElement = document.querySelector('.custom');
  customElement.style.transform = `translateX(${obj.scroll.y * 0.5}px)`;
});

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

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

Оглавление