Типы данных и интерфейсы

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

Ключевым понятием является объект LocomotiveScroll, который инкапсулирует состояние скролла, его скорость, направление и позиции элементов на странице. Он предоставляет набор методов, событий и свойств, доступных для взаимодействия с DOM и управления анимациями.

Типы данных

1. Конфигурационный объект

При инициализации LocomotiveScroll используется объект настроек:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  direction: 'vertical',
  multiplier: 1.5,
  lerp: 0.1
});

Основные свойства:

  • el (HTMLElement) — контейнер, который будет прокручиваться.
  • smooth (Boolean) — включение плавной прокрутки.
  • direction (String: 'vertical' | 'horizontal') — направление скролла.
  • multiplier (Number) — коэффициент скорости прокрутки.
  • lerp (Number) — параметр сглаживания движения (Linear interpolation).

Все эти параметры управляют интерфейсом прокрутки и поведением элементов, влияя на чувствительность и плавность.

2. События

Locomotive Scroll предоставляет встроенные события, которые возвращают объекты с данными о состоянии скролла:

scroll.on('scroll', (instance) => {
  console.log(instance.scroll.y);
});

Типы данных в событиях:

  • instance.scroll.x / instance.scroll.y — координаты скролла (Number).
  • instance.direction — направление движения ('up' | 'down' | 'left' | 'right').
  • instance.speed — текущая скорость прокрутки (Number).
  • instance.limit — максимальное значение скролла по выбранной оси (Number).

Эти данные можно использовать для синхронизации анимаций и динамического управления классами CSS.

3. Элементы с атрибутами данных

Для реализации параллакса и триггеров Locomotive Scroll использует data-атрибуты:

Параллакс


Липкий блок

Ключевые атрибуты:

  • data-scroll — базовый атрибут для отслеживания элемента.
  • data-scroll-speed (Number) — скорость движения элемента относительно прокрутки.
  • data-scroll-direction ('horizontal' | 'vertical') — направление движения элемента.
  • data-scroll-sticky (Boolean) — фиксирование элемента относительно родителя.
  • data-scroll-target (Selector) — элемент, к которому привязывается эффект.

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

4. Методы API

Locomotive Scroll предоставляет методы для программного управления:

  • update() — пересчитывает размеры и позиции элементов.
  • start() / stop() — запуск и остановка прокрутки.
  • scrollTo(target, options) — программная прокрутка к элементу или позиции.

Пример использования метода scrollTo:

scroll.scrollTo('#section', {
  offset: -100,
  duration: 1200,
  easing: [0.25, 0.00, 0.35, 1.00]
});

Аргументы метода scrollTo:

  • target — HTMLElement, селектор или координата (Number).
  • offset — смещение относительно целевой позиции (Number).
  • duration — время анимации в миллисекундах (Number).
  • easing — кривая анимации в формате массива (Array of Numbers).

Все значения строго типизированы, что позволяет контролировать точность движения и синхронизацию эффектов.

Интерфейсы взаимодействия

1. ScrollInstance

Объект ScrollInstance представляет текущее состояние прокрутки:

const instance = scroll.instance;
console.log(instance.scroll.y);
console.log(instance.limit.y);

Структура объекта:

instance = {
  scroll: { x: Number, y: Number },
  limit: { x: Number, y: Number },
  direction: 'up' | 'down' | 'left' | 'right',
  speed: Number
}

Все свойства являются только для чтения, обеспечивая консистентность данных при работе с визуальными эффектами.

2. ScrollElement

Каждый DOM-элемент с атрибутами data-scroll получает интерфейс ScrollElement через внутренние коллекции библиотеки:

scroll.on('call', (value, way, obj) => {
  console.log(obj.el);  // HTMLElement
  console.log(value);   // Значение data-scroll-call
});

Свойства объекта:

  • el — сам элемент (HTMLElement).
  • speed — скорость движения (Number).
  • direction — направление движения (String).
  • inView — булевый флаг нахождения элемента в видимой области.

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

3. Data-driven интерфейс

Locomotive Scroll использует data-driven подход, где параметры элементов задаются через HTML-атрибуты, а не только через JS. Это создает интерфейс сильной типизации и декларативности, позволяющий:

  • Изменять скорость параллакса через числовые значения.
  • Включать липкость или триггеры с булевыми значениями.
  • Ссылаться на другие элементы с селекторами (string).

Такая архитектура обеспечивает гибкость и простоту интеграции с другими библиотеками анимации.

4. Типизация и проверка

Несмотря на динамическую природу JavaScript, Locomotive Scroll строго ожидает конкретные типы данных:

Свойство / Метод Тип данных Описание
el HTMLElement Контейнер прокрутки
smooth Boolean Включение плавной прокрутки
direction String 'vertical' или 'horizontal'
multiplier Number Множитель скорости
lerp Number Сглаживание анимации
scrollTo.offset Number Смещение целевой позиции
scrollTo.duration Number Длительность анимации
scrollTo.easing Array[Number] Кривая анимации
data-scroll-speed Number Скорость параллакса элемента
data-scroll-sticky Boolean Липкий элемент
instance.scroll Object Координаты скролла
instance.limit Object Максимальные значения скролла
instance.direction String Направление движения
instance.speed Number Скорость прокрутки

Строгое соблюдение типов предотвращает ошибки анимации и обеспечивает согласованность данных между JS и DOM.

Оглавление