Основы параллакса через data-scroll-speed

Для работы с эффектами параллакса через data-scroll-speed необходимо сначала подключить библиотеку Locomotive Scroll и инициализировать её на странице. Основная структура инициализации выглядит следующим образом:

import LocomotiveScroll from 'locomotive-scroll';
import 'locomotive-scroll/dist/locomotive-scroll.css';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  multiplier: 1,
  class: 'is-reveal',
});
  • el – контейнер, в котором будет происходить скроллинг. Обычно это <div> с уникальным ID или классом.
  • smooth – включает плавный скролл, необходимый для корректной работы параллакса.
  • multiplier – множитель скорости прокрутки, позволяет ускорить или замедлить эффект скроллинга.
  • class – класс, который библиотека добавляет элементам при их появлении в зоне видимости.

Принцип работы data-scroll-speed

Атрибут data-scroll-speed задаёт относительную скорость движения элемента при скроллинге относительно обычного потока страницы.

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

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

<div id="scroll-container">
  <section>
    <h1 data-scroll data-scroll-speed="2">Ускоренный заголовок</h1>
    <p data-scroll data-scroll-speed="0.5">Замедленный текст параллакса</p>
    <img data-scroll data-scroll-speed="-1" src="image.jpg" alt="Обратный параллакс">
  </section>
</div>
  • Элемент с data-scroll-speed="2" будет двигаться в два раза быстрее, чем остальная страница.
  • Элемент с data-scroll-speed="0.5" будет двигаться медленнее.
  • Отрицательное значение создаёт эффект движения в обратном направлении относительно скролла.

Подключение к классам и выбор элементов

Locomotive Scroll использует селекторы data-scroll для отслеживания элементов. Можно комбинировать data-scroll-speed с другими атрибутами:

  • data-scroll-direction="vertical|horizontal" – задаёт направление движения элемента.
  • data-scroll-offset="значение" – смещает точку активации элемента при появлении в зоне видимости.
  • data-scroll-repeat – позволяет повторно анимировать элемент при повторном появлении.

Пример:

<div class="parallax-wrapper" data-scroll data-scroll-speed="1.5" data-scroll-direction="vertical">
  <img src="mountains.png" alt="Горы">
</div>

Такой элемент будет смещаться вертикально с увеличенной скоростью относительно основного скролла.

Управление эффектами через JavaScript

Для динамического изменения data-scroll-speed используется метод update() объекта Locomotive Scroll. Например, чтобы изменить скорость элемента при определённом событии:

const parallaxElement = document.querySelector('.parallax-wrapper');
parallaxElement.setAttribute('data-scroll-speed', '3');
scroll.update();

Метод update() пересчитывает позиции всех элементов и пересобирает внутренние координаты, что особенно важно при динамическом добавлении новых элементов или изменении их атрибутов.

Работа с секциями и слоями параллакса

Эффект параллакса часто используется в многослойных композициях, где элементы переднего плана движутся быстрее, а задний план медленнее. Для этого создаётся несколько элементов с разными значениями data-scroll-speed:

<div class="parallax-scene" data-scroll-container>
  <div class="background" data-scroll data-scroll-speed="0.3"></div>
  <div class="midground" data-scroll data-scroll-speed="1"></div>
  <div class="foreground" data-scroll data-scroll-speed="2"></div>
</div>
  • Background – элементы с медленной скоростью создают глубину.
  • Midground – основное содержание страницы, движется с базовой скоростью.
  • Foreground – элементы с ускоренным движением создают динамику и ощущение близости.

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

  1. Не использовать слишком большое количество элементов с параллаксом на одной странице – это может замедлить рендер.
  2. Стараться применять will-change: transform; к элементам с data-scroll-speed, чтобы браузер оптимизировал анимацию GPU.
  3. При изменении размеров окна необходимо вызывать scroll.update(), чтобы пересчитать позиции.
  4. Сочетать отрицательные и положительные значения data-scroll-speed для создания сложных визуальных эффектов без дополнительного JavaScript.

Комбинирование с анимациями

Эффекты параллакса хорошо интегрируются с CSS-анимациями и библиотеками анимации, например, GSAP. Для синхронизации с Locomotive Scroll можно использовать событие scroll:

scroll.on('scroll', (obj) => {
  gsap.to('.foreground', {
    y: obj.scroll.y * 0.5,
    ease: 'power1.out',
  });
});

Такой подход позволяет добавлять дополнительную анимацию элементов при скролле, оставаясь в рамках параллакс-логики.

Итоговые ключевые моменты

  • data-scroll-speed определяет относительную скорость движения элементов.
  • Значения >1 ускоряют, <1 замедляют, отрицательные изменяют направление.
  • Совместно с data-scroll-direction, data-scroll-offset и data-scroll-repeat позволяют создавать сложные визуальные эффекты.
  • Для динамического управления скоростью важно использовать scroll.update().
  • Многослойные композиции усиливают эффект глубины и создают выразительный параллакс.

Такой подход обеспечивает гибкое и производительное создание параллакс-эффектов на странице с помощью Locomotive Scroll.

Оглавление