multiplier

В Locomotive Scroll параметр multiplier управляет скоростью скроллинга относительно нативного поведения браузера. Он задаёт коэффициент, который умножает величину прокрутки: значения больше 1 ускоряют скролл, меньше 1 замедляют.

import LocomotiveScroll fr om 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  multiplier: 1.5, // скорость скролла увеличена на 50%
});

В этом примере multiplier: 1.5 увеличивает скорость скроллинга на 50% по сравнению с обычным поведением. Это полезно при создании динамичных лендингов и эффектов параллакса, когда стандартной скорости недостаточно для визуального акцента.

Влияние multiplier на различные типы устройств

Locomotive Scroll учитывает особенности устройств с тачскринами и десктопных систем. Значение multiplier ведёт себя по-разному в зависимости от того, используется ли колесо мыши, трекпад или свайп.

Примеры:

  • multiplier < 1 — замедляет скролл, полезно для эффектов медленной прокрутки на параллакс-слоях.
  • multiplier = 1 — стандартная скорость нативного скролла.
  • multiplier > 1 — ускоряет прокрутку, что особенно заметно при длинных страницах и лендингах с интерактивными секциями.

На мобильных устройствах слишком большое значение может вызвать дрожание и потерю плавности. Рекомендуется тестировать на iOS и Android отдельно.

Динамическая смена multiplier

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

scroll.update({ multiplier: 0.8 }); // замедление прокрутки
scroll.update({ multiplier: 2 });   // ускорение прокрутки

Метод update() пересчитывает внутренние позиции и применяет новый коэффициент, не перезапуская полностью Locomotive Scroll. Это позволяет реализовать интерактивные изменения скорости, например, при наведении на определённые секции.

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

Эффекты параллакса напрямую зависят от multiplier. Сильный параллакс требует аккуратной настройки скорости:

  • При низком multiplier движение фона кажется медленным и плавным.
  • При высоком multiplier объекты движутся быстрее, создавая динамичный визуальный ритм.
scroll.on('scroll', (instance) => {
  const speedFactor = instance.scroll.y * 0.3; // параллакс-коэффициент
  document.querySelector('.parallax-layer').style.transform = `translateY(${speedFactor}px)`;
});

Ключевой момент: multiplier масштабирует всю прокрутку, а эффекты параллакса добавляют смещения относительно текущей позиции скролла. Поэтому корректировка multiplier влияет на общую динамику страницы.

Ограничения и рекомендации

  • Слишком высокий multiplier может вызвать ощущение «прыжков» на медленных устройствах.
  • Слишком низкий multiplier делает страницу тяжёлой для прокрутки и может раздражать пользователей.
  • Для плавного пользовательского опыта лучше устанавливать значения в диапазоне 0.5–2.
  • При использовании smooth: true эффект multiplier проявляется наиболее заметно, так как Locomotive Scroll интерполирует движение скролла, создавая мягкую анимацию.

Практический пример комбинации параметров

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

scroll.on('scroll', (instance) => {
  const progress = instance.scroll.y / instance.lim it;
  document.querySelector('.progress-bar').style.width = `${progress * 100}%`;
});

Здесь multiplier: 1.2 ускоряет скролл, а плавная анимация элементов с классом is-revealed создаёт визуально динамичную страницу. Комбинация параметров позволяет управлять скоростью и визуальными эффектами без дополнительного кода для нативного скролла.

Выводы по использованию multiplier

  • Основной инструмент для контроля скорости скролла.
  • Влияет на все визуальные эффекты, связанные с положением скролла.
  • Может быть изменён динамически через метод update().
  • Требует тестирования на разных устройствах для сохранения плавности.

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

Оглавление