Установка через CDN

Для использования Locomotive Scroll без сборщиков модулей, таких как Webpack или Vite, оптимальным решением является подключение библиотеки через CDN. Это позволяет быстро интегрировать функционал плавного скролла в проект, сохраняя простоту и минимальные настройки.

Подключение CSS

Locomotive Scroll требует подключение собственного CSS-файла, который задаёт базовые стили контейнера скролла и элементов. Для CDN используйте следующую ссылку:

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

Ключевые моменты:

Стили обеспечивают корректное позиционирование контента внутри контейнера.
Без подключения CSS могут возникнуть проблемы с видимостью или поведением элементов.
Версия 4.2.2 является стабильной на момент публикации, но следует проверять актуальные версии на jsDelivr.

Подключение JS

Скрипт библиотеки подключается следующим образом:

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

Особенности использования через CDN:

Библиотека доступна глобально через объект LocomotiveScroll.
Нет необходимости в import или require, что упрощает внедрение в обычный HTML.
Подключение перед инициализацией скрипта обеспечит корректную работу всех методов.

Создание контейнера скролла

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

<div id="main-container" data-scroll-container>
  <section data-scroll-section>
    <h1 data-scroll data-scroll-speed="2">Пример заголовка</h1>
    <p data-scroll data-scroll-delay="0.2">Текст с эффектом плавного появления</p>
  </section>
  <section data-scroll-section>
    <h2 data-scroll data-scroll-speed="-1">Другой блок</h2>
  </section>
</div>

Важные моменты:

data-scroll-container — основной контейнер, к которому привязывается скролл.
data-scroll-section — логическая секция, позволяющая библиотеке оптимизировать анимацию.
data-scroll, data-scroll-speed, data-scroll-delay — атрибуты для анимаций элементов при скролле.

Инициализация Locomotive Scroll

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

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
      multiplier: 1.0,
      class: 'is-reveal'
    });

    // Пример обновления при изменении контента
    window.addEventListener('resize', () => scroll.update());
  });
</script>

Пояснение параметров:

el — элемент-контейнер скролла.
smooth — включение плавного скролла.
multiplier — коэффициент скорости скролла (1 — стандартная скорость, 2 — в два раза быстрее).
class — класс, добавляемый элементам при их появлении в области видимости, используется для анимаций.

Дополнительно:

Метод scroll.update() необходим при динамическом изменении DOM, например, после загрузки изображений или контента через AJAX.
Атрибуты data-scroll-speed и data-scroll-delay позволяют создавать параллакс и эффекты последовательного появления.

Преимущества использования CDN

Быстрое внедрение без настройки сборщиков.
Автоматическая оптимизация загрузки через сеть CDN.
Совместимость с любыми проектами, где доступна разметка HTML и стандартный JS.
Минимальные настройки, что особенно удобно для прототипов и демонстрационных проектов.