Автоматизация тестов

Для начала работы с Locomotive Scroll необходимо установить библиотеку через npm или подключить её через CDN. Использование npm предоставляет больше возможностей для интеграции с современными сборщиками модулей.

npm install locomotive-scroll

После установки подключение библиотеки осуществляется через импорт в Jav * aScript:

import LocomotiveScroll from 'locomotive-scroll';

Инициализация создаётся на корневом элементе, который будет прокручиваться:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  multiplier: 1.2,
  class: 'is-reveal'
});

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

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

Настройка событий и триггеров

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

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

Можно использовать события call, чтобы привязывать анимации или действия к элементам с атрибутом data-scroll-call:

scroll.on('call', (func, direction, obj) => {
  if(func === 'fadeIn' && direction === 'enter') {
    obj.el.classList.add('visible');
  }
});

Особенности работы:

  • enter и leave указывают направление пересечения элемента с видимой областью.
  • Объект obj содержит ссылку на элемент и координаты.

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

Locomotive Scroll не управляет анимациями напрямую, но тесно интегрируется с CSS и сторонними библиотеками, например, GSAP. Для плавного появления элементов можно использовать CSS:

[data-scroll] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-scroll].is-reveal {
  opacity: 1;
  transform: translateY(0);
}

Активация класса через скролл добавляет плавный эффект.

Работа с горизонтальной прокруткой

Locomotive Scroll поддерживает горизонтальный скролл, что удобно для каруселей и лендингов с нестандартной прокруткой.

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  direction: 'horizontal'
});

Особенности горизонтального скролла:

  • Свойство direction: 'horizontal' меняет направление скролла.
  • Элементы располагаются горизонтально с помощью CSS (display: flex; flex-direction: row;).

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

При динамическом добавлении контента важно обновлять скролл, чтобы элементы корректно определялись.

scroll.update();

Для автоматического обновления при изменении размеров окна:

window.addEventListener('resize', () => {
  scroll.update();
});

Рекомендации:

  • Вызов update() после загрузки изображений или AJAX-контента.
  • Использовать resize для корректного пересчета координат элементов.

Взаимодействие с другими библиотеками

Locomotive Scroll совместим с GSAP, Barba.js и другими библиотеками для анимации и управления переходами. Для синхронизации анимаций с прокруткой используется метод scroll.scrollTo:

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

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

  • offset — смещение относительно целевого элемента.
  • duration — длительность анимации в миллисекундах.
  • easing — кривые ускорения (можно передать массив значений cubic-bezier).

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

Для больших страниц с множеством анимаций и элементов важно оптимизировать Locomotive Scroll:

  • Использовать requestAnimationFrame для тяжелых операций внутри событий скролла.
  • Минимизировать количество элементов с атрибутами data-scroll.
  • Применять intersection observer для ленивой загрузки элементов и изображений.
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting){
      entry.target.classList.add('loaded');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.lazy').forEach(el => observer.observe(el));

Работа с мобильными устройствами

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

  • smooth: true на iOS может потреблять много ресурсов; можно отключать для тяжелых страниц.
  • Проверять поддержку touch и свайпов.
  • Минимизировать количество фиксированных элементов, так как они могут конфликтовать с прокруткой.
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: !isMobile
});

Дебаг и логирование

Для анализа работы скролла используется консольное логирование событий и проверка состояния через DevTools.

scroll.on('scroll', (args) => console.log(args));
scroll.on('call', (func, direction, obj) => console.log(func, direction, obj));

Это позволяет отслеживать ошибки анимаций, неправильное позиционирование элементов и некорректную работу триггеров.

Оглавление