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

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

Анимация движения по оси X и Y

Для создания базового параллакса используется свойство translateX или translateY. Пример анимации нескольких слоёв с разной скоростью:

const layers = document.querySelectorAll('.layer');

layers.forEach((layer, index) => {
  anime({
    targets: layer,
    translateY: (el, i) => i * 20, // смещение каждого слоя по Y
    duration: 2000,
    easing: 'easeOutQuad',
    loop: true,
    direction: 'alternate'
  });
});
  • targets — целевые элементы для анимации.
  • translateY — задаёт смещение по вертикали.
  • duration — продолжительность анимации в миллисекундах.
  • easing — функция сглаживания движения.
  • loop и direction — делают анимацию циклической с чередованием направления.

Масштабирование и глубина

Для создания ощущения глубины элементы ближнего плана должны двигаться быстрее, чем дальнего. Эффект усиливается, если добавить масштабирование:

anime({
  targets: '.foreground',
  translateY: 50,
  scale: 1.2,
  duration: 1500,
  easing: 'easeOutCubic',
  loop: true,
  direction: 'alternate'
});

anime({
  targets: '.background',
  translateY: 20,
  scale: 1,
  duration: 1500,
  easing: 'easeOutCubic',
  loop: true,
  direction: 'alternate'
});
  • scale позволяет увеличить или уменьшить элементы для имитации приближения или удаления.
  • Скорость движения ближних слоёв больше, чем дальних — ключ к реалистичному параллаксу.

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

Для интерактивного параллакса часто используют событие scroll. Положение элементов рассчитывается пропорционально прокрутке страницы:

window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;

  anime({
    targets: '.layer1',
    translateY: scrollPosition * 0.5,
    duration: 0,
    easing: 'linear'
  });

  anime({
    targets: '.layer2',
    translateY: scrollPosition * 0.3,
    duration: 0,
    easing: 'linear'
  });
});
  • scrollY — текущее смещение страницы по вертикали.
  • Произведение на коэффициент скорости позволяет различать глубину слоёв.
  • duration: 0 обеспечивает мгновенную синхронизацию с прокруткой.

Параллакс с эффектом мыши

Для динамичного параллакса можно использовать координаты курсора. Например, движение элементов по оси X:

document.addEventListener('mousemove', (e) => {
  const x = e.clientX;

  anime({
    targets: '.layer',
    translateX: x * 0.05,
    duration: 1000,
    easing: 'easeOutExpo'
  });
});
  • clientX — положение курсора по горизонтали.
  • Множитель (0.05) регулирует амплитуду движения.
  • Эффект усиливается, если применять разные коэффициенты для разных слоёв.

Комбинированный параллакс

Для сложных сцен движения нескольких слоёв можно комбинировать смещения по X, Y, масштаб и прозрачность одновременно:

anime({
  targets: '.layer',
  translateX: () => anime.random(-50, 50),
  translateY: () => anime.random(-30, 30),
  scale: [1, 1.1],
  opacity: [0.8, 1],
  duration: 2500,
  easing: 'easeInOutSine',
  loop: true,
  direction: 'alternate'
});
  • anime.random(min, max) создаёт случайные значения, добавляя эффект естественного движения.
  • Сочетание движения, масштаба и прозрачности усиливает иллюзию глубины.

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

  • Использовать will-change: transform в CSS для элементов с анимацией.
  • Минимизировать количество одновременно анимируемых элементов.
  • Для прокрутки использовать requestAnimationFrame вместо частого запуска анимаций с нулевой длительностью.

Ключевые приёмы

  1. Разные коэффициенты движения для каждого слоя создают ощущение глубины.
  2. Комбинирование translate, scale и opacity усиливает реалистичность эффекта.
  3. Прокрутка и движение мыши могут выступать триггером анимаций, делая сцену интерактивной.
  4. Циклические анимации с loop и direction: 'alternate' позволяют поддерживать постоянное движение без резких скачков.

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

Оглавление