Одностраничные сайты

Locomotive Scroll — это современная библиотека для создания плавной анимации прокрутки и эффекта параллакса на веб-страницах. Она особенно полезна для одностраничных сайтов (landing page, портфолио, презентации продуктов), где важна динамика и визуальная привлекательность.

Инициализация и базовая настройка

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.2.2/dist/locomotive-scroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.2.2/dist/locomotive-scroll.min.js"></script>

Создается контейнер с атрибутом data-scroll-container, который станет основным блоком для отслеживания прокрутки:

<div data-scroll-container>
  <section data-scroll-section>
    <h1 data-scroll data-scroll-speed="2">Заголовок с эффектом параллакса</h1>
    <p data-scroll data-scroll-delay="0.1">Текст с плавной анимацией</p>
  </section>
</div>

Инициализация в Jav * aScript:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1, // скорость сглаживания
  multiplier: 1.0, // множитель прокрутки
});

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

  • el — элемент-контейнер для прокрутки.
  • smooth — включает плавную прокрутку.
  • lerp — коэффициент сглаживания; меньшие значения дают более плавную анимацию.
  • multiplier — регулирует скорость прокрутки относительно стандартного скролла.

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

Параллакс в Locomotive Scroll достигается с помощью атрибутов data-scroll-speed и data-scroll-direction.

<img src="image.jpg" data-scroll data-scroll-speed="3">
  • Положительное значение увеличивает скорость элемента относительно прокрутки.
  • Отрицательное значение замедляет движение и создаёт эффект «отставания».
  • Можно комбинировать с data-scroll-direction="horizontal" для горизонтального движения.

Анимации появления элементов при прокрутке

Locomotive Scroll поддерживает анимацию элементов при появлении в области видимости через события call и scroll. Простейший пример:

<div data-scroll data-scroll-call="fadeIn" data-scroll-repeat>
  Контент для анимации
</div>
scroll.on('call', (func, dir, obj) => {
  if(func === 'fadeIn') {
    obj.el.classList.add('visible');
  }
});

CSS-анимация для плавного появления:

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

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

Особенности:

  • Атрибут data-scroll-repeat позволяет анимации срабатывать при каждом появлении элемента.
  • scroll.on('call') подходит для сложной логики и комбинирования анимаций.

Ленивая загрузка и оптимизация производительности

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

<img data-scroll data-src="large-image.jpg" class="lazy">
scroll.on('scroll', () => {
  document.querySelectorAll('img.lazy').forEach(img => {
    if(img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src;
      img.classList.remove('lazy');
    }
  });
});

Горизонтальные секции и «свайпинг»

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

<section data-scroll-section data-scroll-direction="horizontal">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</section>
new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  direction: 'horizontal',
});

Совет: горизонтальная прокрутка хорошо сочетается с фиксированными элементами, но требует внимания к адаптивной верстке и touch-событиям на мобильных устройствах.

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

Locomotive Scroll может интегрироваться с GSAP, Three.js и другими библиотеками для анимаций и 3D-графики:

scroll.on('scroll', (obj) => {
  gsap.to('.element', {
    y: obj.scroll.y / 3,
    ease: 'power2.out'
  });
});

Особенности интеграции:

  • Использовать scroll.scroll.instance.scroll.y для получения текущей позиции прокрутки.
  • Для плавных переходов между анимациями лучше отключать стандартный window.scroll и полностью полагаться на Locomotive Scroll.

Управление прокруткой через JavaScript

Locomotive Scroll позволяет программно управлять прокруткой:

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

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

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

Адаптивность и работа с мобильными устройствами

  • По умолчанию Locomotive Scroll отключает плавную прокрутку на устройствах с сенсорными экранами для оптимальной производительности.
  • Можно включить через smartphone: { smooth: true } и tablet: { smooth: true }.
  • Для мобильных сайтов важно проверять взаимодействие с touch-событиями и перекрытие fixed-элементов.

Практические рекомендации для одностраничных сайтов

  • Использовать минимальное количество элементов с высокими data-scroll-speed, чтобы избежать перегрузки анимациями.
  • Комбинировать параллакс с анимациями появления для динамического визуального эффекта.
  • Секционные data-scroll-section помогают структурировать страницу и упрощают работу с якорями.
  • Всегда тестировать производительность на мобильных устройствах и старых браузерах.

Эти возможности делают Locomotive Scroll мощным инструментом для создания динамических одностраничных сайтов с уникальной прокруткой и эффектами, полностью контролируемыми через JavaScript и CSS.

Оглавление