Положительные и отрицательные значения

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

Координаты прокрутки и направление

Locomotive Scroll оперирует координатами scroll, которые определяют текущее положение контейнера. Параметр scroll.y возвращает вертикальную позицию в пикселях.

  • Положительные значения соответствуют движению вниз страницы.
  • Отрицательные значения появляются при использовании кастомных смещений или при реализации эффекта обратного параллакса (например, движение элемента против направления прокрутки).

Пример получения текущей позиции:

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

scroll.on('scroll', (obj) => {
  console.log(obj.scroll.y); // Положительное число при прокрутке вниз
});

Параметр data-scroll-speed

Элементам можно задавать скорость движения относительно скролла с помощью атрибута data-scroll-speed. Значения могут быть как положительными, так и отрицательными:

  • Положительное значение ускоряет элемент в том же направлении, что и прокрутка.
  • Отрицательное значение заставляет элемент двигаться в противоположном направлении, создавая эффект «обратного параллакса».

Пример разметки HTML:

<div data-scroll data-scroll-speed="2">Элемент ускорен</div>
<div data-scroll data-scroll-speed="-1.5">Элемент движется обратно</div>

Инициализация:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

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

Смещение элементов с помощью data-scroll-offset

Атрибут data-scroll-offset задаёт смещение точки активации элемента относительно верха контейнера.

  • Положительное значение смещает триггер вниз, то есть элемент станет активным позже, чем по умолчанию.
  • Отрицательное значение смещает триггер вверх, активируя элемент раньше.

Пример:

<div data-scroll data-scroll-offset="100">Смещён вниз</div>
<div data-scroll data-scroll-offset="-50">Смещён вверх</div>

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

События прокрутки и отрицательные значения

События scroll и call могут передавать позиции, которые включают отрицательные значения, если используются кастомные контейнеры или смещения.

scroll.on('call', (value, way, obj) => {
  console.log(value); // Значение из data-scroll-call
  console.log(way);   // "enter" или "leave"
  console.log(obj);   // Включает scroll.y и другие координаты, может быть отрицательным
});

Здесь отрицательные координаты полезны для запуска анимаций при прокрутке вверх или для элементов, расположенных выше видимой области.

Интеграция с GSAP и другие анимационные эффекты

При комбинировании с GSAP положительные и отрицательные значения scroll.y и data-scroll-speed позволяют реализовать сложные анимации:

  • Плавные движения вверх/вниз с изменением скорости.
  • Параллакс-эффекты с различной глубиной.
  • Обратные анимации при прокрутке вверх.

Пример интеграции:

gsap.to(".parallax", {
  y: (i, target) => -scroll.scroll.instance.scroll.y * parseFloat(target.dataset.scrollSpeed),
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

Здесь отрицательные значения data-scroll-speed создают движение против направления скролла, что усиливает визуальный эффект параллакса.

Практические рекомендации

  • Для элементов с глубокой визуальной динамикой лучше комбинировать положительные и отрицательные скорости.
  • Отрицательные смещения и координаты удобны для предварительного запуска анимаций.
  • Положительные значения делают движения более естественными и согласованными с направлением прокрутки.
  • Всегда проверять, как отрицательные значения влияют на адаптивные версии сайта, чтобы избежать нежелательных перескоков элементов.

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

Оглавление