Интернет-магазины

Locomotive Scroll — это современная библиотека для создания плавного скроллинга с поддержкой параллакса и динамических анимаций. В интернет-магазинах она позволяет улучшить пользовательский опыт за счет визуальной привлекательности и более интерактивного взаимодействия с контентом, не жертвуя производительностью.

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

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

import LocomotiveScroll from 'locomotive-scroll';

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

Параметры конфигурации:

  • el — контейнер, внутри которого будет работать скроллинг.
  • smooth — включает плавность прокрутки.
  • multiplier — ускорение скролла, полезно для длинных каталожных страниц.
  • getDirection — определяет направление скролла (up или down).
  • getSpeed — позволяет отслеживать скорость прокрутки для динамических анимаций.

В интернет-магазине важно, чтобы длинные списки товаров и баннерные секции загружались плавно, а пользователи ощущали естественное движение страницы.

Работа с параллакс-эффектами

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

<div class="product-card" data-scroll data-scroll-speed="2">
  <img src="product.jpg" alt="Товар">
  <h2>Название товара</h2>
</div>
  • data-scroll активирует элемент для скроллинга.
  • data-scroll-speed определяет скорость движения относительно основного скролла. Значения >1 ускоряют движение, значения <1 замедляют его.

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

События скролла

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

scroll.on('scroll', (instance) => {
  console.log('Скорость:', instance.speed);
  console.log('Направление:', instance.direction);
});

Применение в интернет-магазине:

  • Подсветка активного раздела каталога при прокрутке.
  • Анимация появления элементов при скролле.
  • Динамическое изменение интерфейса: фиксированные кнопки, панели фильтров, подсказки.

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

Для интернет-магазина важно оптимизировать загрузку товаров. Locomotive Scroll можно совместить с ленивой загрузкой:

const images = document.querySelectorAll('img[data-src]');
scroll.on('scroll', () => {
  images.forEach(img => {
    if (img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
});

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

Анимация при появлении элементов (reveal)

Использование data-scroll и классов для плавного появления улучшает визуальное восприятие товаров:

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

[data-scroll].is-inview {
  opacity: 1;
  transform: translateY(0);
}
scroll.on('call', (value, way, obj) => {
  if (way === 'enter') {
    obj.el.classList.add('is-inview');
  } else {
    obj.el.classList.remove('is-inview');
  }
});
  • is-inview добавляется элементу, когда он попадает в область видимости.
  • Используется для карточек товаров, баннеров и промо-блоков.

Скролл по якорям

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

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    scroll.scrollTo(target);
  });
});
  • Обеспечивает плавное перемещение к нужному разделу каталога.
  • Совместимо с фиксированными меню и фильтрами.

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

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

const scroll = new LocomotiveScroll({
  el: document.querySelector('#js-scroll'),
  smooth: true,
  smartphone: {
    smooth: true
  },
  tablet: {
    smooth: true
  }
});
  • smartphone и tablet разделы позволяют настроить отдельные параметры для мобильной версии.
  • Это важно для интернет-магазинов, где более 60% трафика может приходить с мобильных устройств.

Советы по производительности

  • Минимизировать количество одновременно анимируемых элементов.
  • Использовать data-scroll-repeat только там, где необходимо повторное срабатывание анимации.
  • Комбинировать с ленивой загрузкой и минимизацией DOM-дерева для больших каталогов.

Интеграция с React или Vue

Locomotive Scroll легко интегрируется с современными фреймворками:

React:

import { useEffect, useRef } from 'react';
import LocomotiveScroll from 'locomotive-scroll';

export default function ShopScroll() {
  const scrollRef = useRef(null);

  useEffect(() => {
    const scroll = new LocomotiveScroll({
      el: scrollRef.current,
      smooth: true
    });

    return () => scroll.destroy();
  }, []);

  return <div id="js-scroll" ref={scrollRef}>Контент интернет-магазина</div>;
}
  • Контейнер для скролла оборачивается в ref.
  • При размонтировании компонента необходимо вызывать destroy() для предотвращения утечек памяти.

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

Оглавление