Адаптивность fullpage

ScrollMagic — это библиотека для управления анимациями при прокрутке страницы. В сочетании с fullPage.js можно создавать динамичные, «живые» секции, где анимации реагируют на прокрутку без ущерба для плавности переходов между страницами. Основной принцип — использование ScrollMagic Controller для отслеживания скролла и Scene для задания триггеров и анимаций.

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

fullPage.js разбивает страницу на секции, каждая из которых имеет фиксированную высоту. Для ScrollMagic важно правильно настроить триггеры внутри этих секций, чтобы анимация запускалась не глобально, а локально относительно секции.

new ScrollMagic.Scene({
  triggerElement: "#section1 .animate-element",
  duration: "80%", 
  triggerHook: 0.5
})
.setTween("#section1 .animate-element", {opacity: 1, y: 0})
.addTo(controller);
  • triggerElement — элемент, относительно которого будет отслеживаться начало анимации.
  • duration — длина действия анимации. Можно задавать как пиксели (200) или процент от высоты секции ("80%").
  • triggerHook — точка появления триггера на экране (0 — верх экрана, 1 — низ).

Управление секциями fullPage.js с ScrollMagic

fullPage.js по умолчанию блокирует обычный скролл, заменяя его прокруткой по секциям. Для адаптивной работы ScrollMagic необходимо включать и выключать контроллер в зависимости от текущего режима:

var controller = new ScrollMagic.Controller();
var isFullpageActive = true;

function updateController() {
    if(window.innerWidth < 768) {
        if(isFullpageActive) {
            controller.enabled(false);
            isFullpageActive = false;
        }
    } else {
        if(!isFullpageActive) {
            controller.enabled(true);
            isFullpageActive = true;
        }
    }
}

window.addEventListener('resize', updateController);
updateController();
  • В мобильных устройствах скролл становится обычным, и анимации ScrollMagic должны работать без вмешательства fullPage.js.
  • На больших экранах контроллер включается, и анимации привязываются к секциям.

Связка анимаций и фиксированных элементов

В fullPage.js можно создавать «sticky» эффекты с помощью ScrollMagic, сохраняя элементы видимыми внутри секции:

new ScrollMagic.Scene({
  triggerElement: "#section2",
  triggerHook: 0,
  duration: "100%"
})
.setPin("#section2 .sticky-element")
.addTo(controller);
  • setPin() фиксирует элемент на время действия сцены.
  • Используется для параллакс-эффектов или «прилипших» заголовков в секциях.

Для плавности и адаптивности важно учитывать размеры секций при изменении окна. Можно динамически пересчитывать duration:

scene.duration(function() {
  return document.querySelector("#section2").offsetHeight;
});

Анимации внутри нескольких секций

Когда на одной странице несколько секций с разными анимациями, рекомендуется использовать отдельные сцены для каждой анимации:

var scenes = [];

document.querySelectorAll(".section").forEach(function(section, index){
    var scene = new ScrollMagic.Scene({
        triggerElement: section.querySelector(".animate"),
        duration: "50%",
        triggerHook: 0.7
    })
    .setTween(section.querySelector(".animate"), {scale: 1, opacity: 1})
    .addTo(controller);

    scenes.push(scene);
});
  • Массив scenes помогает управлять анимациями централизованно.
  • Легко деактивировать или обновить анимации при изменении адаптивной верстки.

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

  1. Дебаунс ресайза — при изменении окна пересоздавать сцены не чаще 200–300 мс.
  2. Использование CSS-анимаций через TweenMax/GSAP вместо JS-анимаций напрямую.
  3. Удаление сцен для скрытых секций или мобильных устройств:
if(window.innerWidth < 768){
    scenes.forEach(scene => scene.destroy(true));
}
  1. Проверка видимости секции перед запуском анимации:
if(section.getBoundingClientRect().top < window.innerHeight) {
  // запуск анимации
}

Адаптивные триггеры и duration

Для правильного поведения анимаций на разных экранах необходимо:

  • Использовать проценты от высоты секции вместо фиксированных пикселей.
  • Настраивать triggerHook динамически:
var hookValue = window.innerWidth < 768 ? 0.9 : 0.5;
scene.triggerHook(hookValue);
  • Для горизонтальных секций fullPage.js и ScrollMagic поддерживает работу через horizontal: true в сценах.

Примеры параллакс-эффектов

Параллакс создается путем движения элементов с разной скоростью относительно скролла:

new ScrollMagic.Scene({
  triggerElement: "#section3",
  duration: "200%"
})
.setTween("#section3 .bg", {y: "50%", ease: Linear.easeNone})
.addTo(controller);
  • Элемент .bg будет двигаться медленнее, создавая глубину.
  • ease: Linear.easeNone гарантирует равномерное движение без ускорений.

Итоговая структура для адаптивного fullPage.js + ScrollMagic

  1. Инициализация fullPage.js с секциями.
  2. Создание ScrollMagic Controller и сцены для каждой анимации.
  3. Адаптивная активация/деактивация контроллера на разных ширинах экрана.
  4. Использование setPin, duration и triggerHook для точного контроля анимаций.
  5. Оптимизация через GSAP и проверку видимости элементов.

Такой подход обеспечивает плавные адаптивные анимации, параллакс-эффекты и корректное взаимодействие с прокруткой fullPage.js как на десктопе, так и на мобильных устройствах.

Оглавление