Создание fullpage-эффекта

Fullpage-эффект предполагает прокрутку, при которой каждая секция страницы занимает весь экран и плавно сменяет предыдущую. Библиотека ScrollMagic предоставляет мощные инструменты для управления скроллом и анимациями на основе позиции прокрутки. Ключевые концепции включают сцены (Scenes), контроллеры (Controllers) и привязку анимаций к скроллу через TweenMax/GSAP.

Для создания базового fullpage-эффекта необходимо:

  1. Инициализировать контроллер:
var controller = new ScrollMagic.Controller();

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

  1. Создать сцену для каждой секции:
var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "100%", // продолжительность сцены равна высоте окна
    triggerHook: 0 // начало сцены в верхней точке окна
})
.setPin("#section1") // закрепление секции на весь экран
.addTo(controller);

Пояснения к параметрам:

  • triggerElement – элемент, при достижении которого активируется сцена.
  • duration – длина сцены в пикселях или в процентах от окна. Для fullpage-эффекта удобно использовать "100%".
  • triggerHook – точка запуска сцены на экране (0 – верх, 0.5 – центр, 1 – низ).
  • .setPin() закрепляет элемент, создавая эффект, когда секция не уходит с экрана до окончания сцены.

Управление плавными переходами

Для анимации элементов внутри секции используют GSAP. Например, постепенное появление текста при прокрутке:

var tween = gsap.from("#section1 .text", {opacity: 0, y: 50});

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "50%",
    triggerHook: 0.5
})
.setTween(tween)
.addTo(controller);
  • duration задаёт интервал, в течение которого анимация привязана к скроллу.
  • triggerHook: 0.5 гарантирует запуск в центре экрана.

Пошаговое закрепление всех секций

Fullpage-эффект часто требует последовательного закрепления всех секций. Структура кода для трёх секций выглядит так:

["#section1", "#section2", "#section3"].forEach(function(section){
    new ScrollMagic.Scene({
        triggerElement: section,
        duration: "100%",
        triggerHook: 0
    })
    .setPin(section)
    .addTo(controller);
});

Это позволяет каждой секции занимать весь экран, а при скролле следующая секция плавно заменяет предыдущую.

Добавление параллакса

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

var tweenParallax = gsap.to("#section2 .background", {y: "-50%", ease: "none"});

new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: "100%",
    triggerHook: 0
})
.setTween(tweenParallax)
.addTo(controller);
  • ease: "none" обеспечивает линейное движение, полностью синхронизированное со скроллом.
  • y: "-50%" задаёт смещение фона относительно прокрутки секции.

Сложные комбинации анимаций

ScrollMagic позволяет комбинировать несколько анимаций в одной сцене или создавать цепочки:

var timeline = gsap.timeline();
timeline
    .from("#section3 .title", {opacity: 0, y: -30})
    .from("#section3 .content", {opacity: 0, y: 30});

new ScrollMagic.Scene({
    triggerElement: "#section3",
    duration: "80%",
    triggerHook: 0.2
})
.setTween(timeline)
.addTo(controller);

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

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

  • Ограничение количества pinned-сцен уменьшает нагрузку на браузер.
  • Использование requestAnimationFrame в GSAP автоматически синхронизирует анимацию с перерисовкой.
  • Для мобильных устройств часто применяют упрощённые анимации и отключают закрепление, чтобы избежать «тормозов» при скролле.

Интерактивность и управление скроллом

ScrollMagic предоставляет методы .addIndicators() для визуальной отладки сцен и .remove() или .destroy() для динамического управления сценами. Это удобно при создании интерактивных лендингов, где секции могут появляться или исчезать в зависимости от действий пользователя.

Использование ScrollMagic совместно с GSAP позволяет создавать плавные, интерактивные fullpage-страницы с закреплением секций, параллаксом и сложными анимациями без потери производительности.

Оглавление