Параллакс элементов

Параллакс-эффект создаёт ощущение глубины на веб-странице, когда различные слои элементов перемещаются с разной скоростью относительно прокрутки. Библиотека ScrollMagic позволяет управлять этим эффектом гибко, синхронизируя анимации с прокруткой страницы. Для реализации параллакса обычно используется сочетание ScrollMagic.Scene, контроллера и анимационной библиотеки, такой как GSAP.

// Инициализация контроллера ScrollMagic
var controller = new ScrollMagic.Controller();

Контроллер управляет всеми сценами на странице. Каждая сцена определяет, как и когда элемент анимируется в зависимости от положения прокрутки.

Создание сцены для параллакса

Сцена задаёт три ключевых параметра: элемент-триггер, продолжительность эффекта и анимацию.

var scene = new ScrollMagic.Scene({
  triggerElement: "#section1", // Элемент, при достижении которого запускается анимация
  duration: "200%",            // Продолжительность эффекта в пикселях или процентах
  triggerHook: 0               // Положение триггера на экране (0 = верх, 1 = низ)
})
.setTween("#parallax-element", {y: "50%", ease: Linear.easeNone}) // Анимация GSAP
.addTo(controller); // Добавление сцены в контроллер
  • triggerElement — HTML-элемент, на который ориентируется сцена.
  • duration — длина эффекта, определяет, насколько долго элемент будет смещаться.
  • triggerHook — координата на экране, где начинается сцена (от 0 до 1).
  • setTween — привязка анимации, чаще с GSAP, для плавного смещения.

Параллакс с несколькими слоями

Для создания сложного параллакса с несколькими слоями создаётся отдельная сцена для каждого слоя. Скорость перемещения слоя можно контролировать с помощью значений смещения в анимации.

var layers = document.querySelectorAll(".layer");

layers.forEach(function(layer, index) {
  var depth = layer.getAttribute("data-depth"); // скорость движения слоя

  new ScrollMagic.Scene({
    triggerElement: "#parallax-container",
    duration: "100%",
    triggerHook: 1
  })
  .setTween(layer, {y: (window.innerHeight * depth), ease: Linear.easeNone})
  .addTo(controller);
});
  • data-depth — коэффициент смещения, чем больше значение, тем быстрее слой движется.
  • Использование window.innerHeight позволяет адаптировать смещение к высоте экрана.

Интеграция с GSAP Timeline

Если параллакс включает несколько последовательных анимаций, удобно использовать GSAP Timeline:

var timeline = gsap.timeline();

timeline
  .from("#layer1", {y: -100, opacity: 0, duration: 1})
  .from("#layer2", {y: 200, opacity: 0, duration: 1}, "-=0.5") // перекрытие анимаций
  .to("#layer3", {y: -150, duration: 1});

new ScrollMagic.Scene({
  triggerElement: "#parallax-container",
  duration: "300%",
  triggerHook: 0
})
.setTween(timeline)
.addTo(controller);
  • Timeline позволяет создавать комплексные сцены с параллаксом, объединяя появление, смещение и исчезновение слоёв.
  • Параметр "-=0.5" обеспечивает наложение анимаций для плавного эффекта.

Плавное смещение с transform: translateY

Для оптимизации производительности рекомендуется смещать элементы через CSS-свойство transform:

gsap.to("#parallax-element", {
  yPercent: 50, // смещение в процентах относительно элемента
  ease: "none",
  scrollTrigger: {
    trigger: "#section1",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});
  • yPercent позволяет перемещать элементы относительно их собственного размера, а не в пикселях.
  • Свойство scrub: true синхронизирует анимацию с прокруткой, создавая натуральный параллакс.

Адаптивность и отзывчивость

Параллакс должен корректно работать на разных экранах. Для этого используют:

  • Медиа-запросы для отключения тяжелых анимаций на мобильных устройствах.
  • Пересчёт смещений при изменении размеров окна:
window.addEventListener("resize", function() {
  controller.update(true); // пересчитывает позиции триггеров
});
  • Проверку производительности и ограничение количества слоёв для плавного скролла.

Дополнительные приёмы

  1. Pinning — фиксирование слоя во время прокрутки для создания эффекта «плавающей» картинки:
new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: "100%",
  triggerHook: 0
})
.setPin("#pinned-layer")
.addTo(controller);
  1. Offset — смещение точки начала анимации для точной синхронизации:
triggerElement: "#section1",
offset: 100 // анимация стартует на 100px ниже триггера
  1. Class toggle — добавление CSS-классов при достижении позиции:
.setClassToggle("#element", "active") // добавляет класс 'active'

Это позволяет комбинировать CSS-анимации с JS-параллаксом для лёгких и производительных эффектов.

Использование ScrollMagic совместно с GSAP, контролем триггеров, pinning и слоёв с разной глубиной создаёт гибкий и высокоэффективный параллакс, подходящий как для простых секций, так и для сложных лендингов с множеством анимированных элементов.

Оглавление