Anime.js

Locomotive Scroll — это современная JavaScript-библиотека для реализации плавного скроллинга, а также эффектов, зависящих от прокрутки страницы. Она предоставляет высокую производительность, поддержку горизонтального и вертикального скроллинга и легко интегрируется с анимационными библиотеками, такими как Anime.js или GSAP.

Инициализация скролла

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

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  multiplier: 1.0,
  class: 'is-reveal'
});
  • el — контейнер, внутри которого будет происходить скроллирование. Обычно это <div> с атрибутом data-scroll-container.
  • smooth — включает плавный скролл.
  • multiplier — коэффициент скорости прокрутки.
  • class — CSS-класс, который применяется к элементам при их появлении в зоне видимости.

HTML-разметка для скролла

Для корректной работы Locomotive Scroll необходимо обернуть контент в контейнер с data-scroll-container:

<div data-scroll-container>
  <section data-scroll-section>
    <h1 data-scroll data-scroll-speed="2">Пример заголовка</h1>
    <p data-scroll data-scroll-speed="1">Текстовый блок с эффектом параллакса</p>
  </section>
</div>
  • data-scroll-section — раздел страницы, с которым будут работать эффекты прокрутки.
  • data-scroll — указывает, что элемент отслеживается Locomotive Scroll.
  • data-scroll-speed — определяет скорость движения элемента относительно прокрутки (эффект параллакса).

Методы и свойства

  • scroll.update() — обновляет позицию элементов и размеры контейнера, необходимо при динамическом добавлении контента.
  • scroll.scrollTo(target, options) — программно прокручивает страницу до указанного элемента или позиции:
scroll.scrollTo('#section2', {
  offset: -100,
  duration: 2000,
  easing: [0.25, 0.00, 0.35, 1.00]
});
  • scroll.on(‘scroll’, callback) — событие, вызываемое при каждом скролле. Передает объект с текущей позицией:
scroll.on('scroll', (instance) => {
  console.log(instance.scroll.y); // текущая вертикальная позиция
});
  • scroll.destroy() — отключает Locomotive Scroll и возвращает стандартный скролл браузера.

Интеграция с Anime.js

Locomotive Scroll прекрасно сочетается с Anime.js для создания сложных анимаций, синхронизированных с прокруткой.

Пример: анимация появления блока при скролле:

scroll.on('scroll', ({ scroll }) => {
  const elements = document.querySelectorAll('.animated-block');
  elements.forEach((el) => {
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight * 0.8) {
      anime({
        targets: el,
        translateY: [50, 0],
        opacity: [0, 1],
        duration: 1000,
        easing: 'easeOutQuad'
      });
    }
  });
});
  • targets — элемент, на который будет применяться анимация.
  • translateY — вертикальное смещение.
  • opacity — прозрачность элемента.
  • duration — длительность анимации в миллисекундах.
  • easing — функция плавности.

Эффекты параллакса

Locomotive Scroll позволяет легко создавать параллакс-эффекты без использования сторонних библиотек:

<img src="image.jpg" data-scroll data-scroll-speed="3" alt="Параллакс изображение">

Чем выше значение data-scroll-speed, тем быстрее элемент двигается относительно скролла. Для горизонтального параллакса можно использовать data-scroll-direction="horizontal".

Обновление после динамического контента

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

scroll.update();

Или при полной пересборке страницы:

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

Настройка кастомных классов

Locomotive Scroll применяет классы к элементам при появлении их в зоне видимости:

  • is-inview — элемент виден на экране.
  • is-reveal — элемент был раскрыт один раз при скролле.

Можно использовать эти классы для триггера Anime.js-анимаций через CSS-селекторы или JS:

scroll.on('call', (func, dir, obj) => {
  if (func === 'fadeIn') {
    anime({
      targets: obj.el,
      opacity: [0, 1],
      translateY: [20, 0],
      duration: 800
    });
  }
});

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

  • Использовать requestAnimationFrame для сложных анимаций.
  • Минимизировать количество элементов с data-scroll.
  • Вызывать scroll.update() только при необходимости.
  • Использовать GPU-ускоренные свойства CSS (transform, opacity) вместо изменения top или left.

Горизонтальный скролл

Locomotive Scroll поддерживает горизонтальное скроллирование:

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

Элементы можно смещать по горизонтали через data-scroll-speed аналогично вертикальному скроллу.

Locomotive Scroll — мощный инструмент для создания интерактивных и плавных эффектов на веб-страницах. Совмещение с Anime.js позволяет добиться впечатляющих анимаций, синхронизированных с прокруткой, без потери производительности и стабильности работы страницы.

Оглавление