smooth

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

Инициализация и базовая конфигурация

Для начала работы необходимо подключить библиотеку и создать экземпляр класса LocomotiveScroll. Основные параметры:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true, // включает плавный скролл
  multiplier: 1, // коэффициент скорости скролла
  class: 'is-reveal', // класс, который добавляется элементам при появлении
});
  • el — корневой контейнер с контентом, внутри которого будет применяться эффект плавного скролла.
  • smooth — включение плавного скролла. Может быть true для всех устройств или объект с настройками для десктопа и мобильных отдельно.
  • multiplier — регулирует скорость скролла; значения меньше 1 замедляют, больше 1 ускоряют движение.
  • class — CSS-класс, который библиотека автоматически добавляет к элементам при их появлении на экране (используется для анимаций).

Настройка мобильного поведения

Locomotive Scroll позволяет различать поведение на разных устройствах:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  smartphone: {
    smooth: false, // отключение плавного скролла на мобильных для производительности
  },
  tablet: {
    smooth: true,
  },
});
  • smartphone.smooth и tablet.smooth — позволяют адаптировать плавность под тип устройства.
  • Важно учитывать, что на мобильных плавный скролл может создавать лаги на слабых устройствах, поэтому часто используется false.

Взаимодействие с элементами на скролле

Locomotive Scroll позволяет привязывать анимации и эффекты к положению элементов на странице с помощью атрибутов:


  Элемент с ускоренным скроллом





  Элемент с повторяющейся анимацией
  • data-scroll — пометка элемента для библиотеки.
  • data-scroll-speed — множитель скорости скролла относительно основного движения. Значение 2 удваивает скорость, -1 движет в обратную сторону.
  • data-scroll-repeat — позволяет элементу анимироваться при повторном появлении в зоне видимости.
  • data-scroll-class — класс, который добавляется при попадании элемента в зону видимости.

Привязка к событиям скролла

Locomotive Scroll предоставляет API для отслеживания событий скролла:

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

scroll.on('call', (func, way, obj) => {
  console.log(func, way, obj);
});
  • scroll — срабатывает при каждом движении скролла, передавая объект с текущей позицией и направлениями.
  • call — срабатывает при попадании элемента с атрибутом data-scroll-call. Полезно для триггеров анимаций или изменения состояния страницы.

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

Locomotive Scroll хорошо сочетается с библиотеками типа GSAP для плавных анимаций:

import { gsap } from "gsap";

scroll.on('scroll', (obj) => {
  gsap.to(".box", {
    x: obj.scroll.y * 0.5,
    duration: 0.3,
  });
});
  • Анимация привязывается к текущей позиции скролла (obj.scroll.y).
  • Позволяет создавать параллакс-эффекты, сдвиг элементов по оси X или Y, масштабирование и прозрачность.

Обновление и ресайз

После динамического изменения контента страницы необходимо обновлять локомотив:

scroll.update();
  • Используется после добавления новых элементов, изменения размеров блоков или асинхронной подгрузки контента.
  • Позволяет корректно пересчитать позиции элементов и зоны их видимости.

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

  • Использовать smooth: false для мобильных устройств на слабых девайсах.
  • Минимизировать количество элементов с data-scroll-speed и data-scroll-repeat — чем их больше, тем выше нагрузка.
  • Обновлять scroll только при необходимости (scroll.update()), избегая лишних вызовов.
  • Применять will-change: transform к элементам, которые анимируются через Locomotive Scroll, для аппаратного ускорения.

Параллакс и продвинутые эффекты

Locomotive Scroll позволяет создавать параллакс разных уровней:

Слой 1


Слой 2
  • Слой с большей скоростью движется быстрее, создавая ощущение глубины.
  • Можно комбинировать с масштабированием, изменением прозрачности и поворотом для сложных сцен.

Также можно использовать атрибут data-scroll-direction для контроля движения по оси x или y.

Оглавление