Подключение к проекту

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

npm install locomotive-scroll

или

yarn add locomotive-scroll

После установки библиотеку можно подключить в проекте через ES6-модули:

import LocomotiveScroll from 'locomotive-scroll';
import 'locomotive-scroll/dist/locomotive-scroll.css';

Подключение CSS обязательно, так как библиотека использует собственные стили для корректной работы прокрутки.

Инициализация прокрутки

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

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

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

  • el – контейнер с контентом, который будет прокручиваться. Рекомендуется добавлять атрибут data-scroll-container.
  • smooth – включает плавную прокрутку.
  • smartphone и tablet – настройки для мобильных устройств и планшетов. Позволяют включать или отключать плавность прокрутки отдельно для этих платформ.

Структура HTML

Для корректной работы Locomotive Scroll необходимо использовать определённую структуру HTML:

<div data-scroll-container>
  <section data-scroll-section>
    <h1 data-scroll data-scroll-speed="2">Заголовок с эффектом параллакса</h1>
    <p data-scroll data-scroll-repeat>Текст, который будет анимироваться при скролле</p>
  </section>
</div>

Важные моменты:

  • Атрибут data-scroll-container обозначает контейнер, в котором будет выполняться прокрутка.
  • Каждая секция контента должна быть обёрнута в data-scroll-section.
  • Элементы с data-scroll могут анимироваться при прокрутке. Атрибут data-scroll-speed задаёт скорость параллакса, а data-scroll-repeat позволяет повторять анимацию при повторном попадании элемента в зону видимости.

События и методы

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

scroll.on('scroll', (args) => {
  console.log('Позиция скролла:', args.scroll.y);
});

scroll.scrollTo('#target', {
  offset: -100,
  duration: 1500,
  easing: [0.25, 0.0, 0.35, 1.0]
});

Основные события:

  • scroll – срабатывает при каждом обновлении позиции скролла.
  • call – позволяет вызывать кастомные функции для элементов с data-scroll-call.
  • resize – срабатывает при изменении размеров окна.

Методы:

  • update() – обновляет размеры и позиции элементов после изменения DOM.
  • destroy() – полностью удаляет прокрутку и возвращает контейнер в стандартное поведение.
  • scrollTo(target, options) – прокрутка к определённому элементу или координате с возможностью задать смещение, продолжительность и easing.

Работа с динамическим контентом

Если контент страницы загружается динамически (например, через AJAX или при использовании SPA), необходимо вызывать метод update() после добавления новых элементов:

scroll.update();

Это обновит позиции всех элементов с data-scroll и обеспечит корректную работу анимаций.

Настройка плавности и эффекта параллакса

Плавность прокрутки настраивается через параметр smooth, но можно также тонко регулировать её поведение:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1
});
  • lerp – коэффициент интерполяции. Чем меньше значение, тем более “тяжёлая” и медленная прокрутка.

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

<h2 data-scroll data-scroll-speed="-1.5">Эффект замедления</h2>

Особенности мобильной версии

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

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

Это полезно для повышения производительности на слабых устройствах или для корректной работы встроенных жестов прокрутки.

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

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

Итоговая структура подключения

  1. Установка библиотеки через npm/yarn.
  2. Импорт JS и CSS файлов.
  3. Создание контейнера с data-scroll-container.
  4. Инициализация экземпляра LocomotiveScroll с настройками.
  5. Добавление элементов с атрибутами data-scroll, data-scroll-speed и data-scroll-repeat.
  6. Настройка событий и вызов методов по необходимости (update(), scrollTo() и т.д.).

Эта последовательность обеспечивает корректную работу прокрутки, плавные анимации и удобное управление динамическим контентом.

Оглавление