Параллакс эффекты

Параллакс — это визуальный приём, при котором элементы интерфейса движутся с разной скоростью относительно прокрутки или взаимодействия пользователя. В веб-разработке этот эффект используется для создания глубины, акцентов и ощущения «живого» интерфейса.

Основной принцип:

  • фоновые элементы двигаются медленнее
  • передний план реагирует быстрее и заметнее

В библиотеке Motion One параллакс реализуется через анимации, синхронизированные со скроллом или пользовательскими событиями.

Базовая реализация параллакса при скролле

Motion One предоставляет API для отслеживания прогресса прокрутки. В основе — использование scroll() и трансформаций.

Простейший пример:

import { scroll, animate } from "motion"

const element = document.querySelector(".parallax")

scroll(
  animate(element, {
    transform: ["translateY(0px)", "translateY(-200px)"]
  })
)

Что происходит:

  • при прокрутке страницы значение translateY изменяется
  • элемент смещается вверх медленнее, чем сам скролл
  • создаётся эффект глубины

Контроль диапазона движения

Параллакс редко должен работать на всей длине страницы. Motion One позволяет задавать диапазон:

scroll(
  animate(".parallax", {
    transform: ["translateY(0px)", "translateY(-150px)"]
  }),
  {
    target: document.querySelector(".section"),
    offset: ["start end", "end start"]
  }
)

Параметры:

  • target — элемент, относительно которого считается скролл
  • offset — точки начала и окончания анимации

Это позволяет:

  • запускать эффект только при попадании блока в viewport
  • точно контролировать поведение

Разные скорости для разных слоёв

Классический параллакс строится из нескольких слоёв:

scroll(
  animate(".layer-back", {
    transform: ["translateY(0px)", "translateY(-50px)"]
  })
)

scroll(
  animate(".layer-middle", {
    transform: ["translateY(0px)", "translateY(-100px)"]
  })
)

scroll(
  animate(".layer-front", {
    transform: ["translateY(0px)", "translateY(-200px)"]
  })
)

Результат:

  • дальний слой почти неподвижен
  • средний движется умеренно
  • передний — активно

Так формируется иллюзия трёхмерного пространства.

Параллакс по оси X

Эффект не ограничен вертикальным движением:

scroll(
  animate(".horizontal", {
    transform: ["translateX(0px)", "translateX(300px)"]
  })
)

Применяется для:

  • горизонтальных галерей
  • декоративных элементов
  • сложных интерфейсных сцен

Использование opacity и scale

Параллакс может включать не только смещение, но и другие свойства:

scroll(
  animate(".fade-layer", {
    opacity: [1, 0],
    transform: ["scale(1)", "scale(1.2)"]
  })
)

Комбинации:

  • уменьшение прозрачности усиливает эффект удаления
  • масштаб добавляет ощущение глубины

Связка с CSS-переменными

Для сложных сцен удобно использовать CSS-переменные:

scroll(({ y }) => {
  document.documentElement.style.setProperty(
    "--scroll-progress",
    y.progress
  )
})

CSS:

.parallax {
  transform: translateY(calc(var(--scroll-progress) * -200px));
}

Преимущества:

  • централизованное управление
  • гибкость стилизации
  • меньше JavaScript-анимаций

Параллакс при движении курсора

Motion One позволяет создавать интерактивный параллакс:

document.addEventListener("mousemove", (event) => {
  const x = event.clientX / window.innerWidth
  const y = event.clientY / window.innerHeight

  animate(".interactive", {
    transform: `translate(${x * 50}px, ${y * 50}px)`
  }, { duration: 0.3 })
})

Эффект:

  • элементы «следуют» за курсором
  • создаётся ощущение глубины и отклика

Комбинирование скролла и курсора

Более сложный вариант — совмещение эффектов:

scroll(
  animate(".layer", {
    transform: ["translateY(0px)", "translateY(-150px)"]
  })
)

document.addEventListener("mousemove", (e) => {
  const x = e.clientX / window.innerWidth

  animate(".layer", {
    transform: `translateX(${x * 30}px)`
  }, { duration: 0.2 })
})

Особенность: необходимо аккуратно комбинировать transform, иначе эффекты будут конфликтовать.

Решение — использовать отдельные обёртки:

<div class="wrapper">
  <div class="parallax-layer"></div>
</div>
  • wrapper — реагирует на скролл
  • parallax-layer — на курсор

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

Параллакс может быть ресурсоёмким. Основные рекомендации:

Использование transform

  • всегда применять transform, а не top/left
  • это задействует GPU

Ограничение количества элементов

  • не анимировать десятки слоёв одновременно
  • группировать элементы

will-change

.parallax {
  will-change: transform;
}

Дебаунс и сглаживание

  • избегать резких обновлений
  • использовать небольшие duration

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

Параллакс на мобильных требует осторожности:

  • отключение сложных эффектов при слабой производительности
  • уменьшение амплитуды движения
  • использование prefers-reduced-motion
const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)")

if (!prefersReduced.matches) {
  // запуск параллакса
}

Создание многослойных сцен

Пример структуры:

<section class="scene">
  <div class="layer sky"></div>
  <div class="layer mountains"></div>
  <div class="layer trees"></div>
  <div class="layer foreground"></div>
</section>

Анимация:

const layers = [
  { selector: ".sky", speed: 20 },
  { selector: ".mountains", speed: 50 },
  { selector: ".trees", speed: 100 },
  { selector: ".foreground", speed: 150 }
]

layers.forEach(({ selector, speed }) => {
  scroll(
    animate(selector, {
      transform: [`translateY(0px)`, `translateY(-${speed}px)`]
    })
  )
})

Такой подход:

  • масштабируем
  • легко поддерживается
  • позволяет быстро менять глубину сцены

Параллакс с использованием timeline

Для синхронизации нескольких эффектов:

import { timeline, scroll } from "motion"

const tl = timeline([
  [".layer1", { transform: ["translateY(0)", "translateY(-100px)"] }],
  [".layer2", { transform: ["translateY(0)", "translateY(-200px)"] }]
])

scroll(tl)

Преимущество:

  • единый контроль
  • согласованность движения

Частые ошибки

1. Слишком сильный сдвиг Вызывает дискомфорт и ломает UX

2. Несогласованные скорости Слои начинают «разваливаться»

3. Перегрузка эффектами Параллакс должен дополнять интерфейс, а не отвлекать

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

Практические сценарии применения

  • лендинги с визуальным сторителлингом
  • hero-секции
  • галереи и портфолио
  • игровые и креативные интерфейсы
  • презентационные сайты

Параллакс в Motion One остаётся гибким инструментом, который при грамотной настройке позволяет создавать сложные, плавные и производительные визуальные сцены без перегрузки кода и интерфейса.

Оглавление