Фокус-менеджмент

Фокус-менеджмент в ScrollMagic заключается в управлении событиями и анимациями на основе позиции прокрутки страницы. Основным элементом является сцена (Scene), которая определяет область действия и поведение элементов при скролле.

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при достижении которого активируется сцена
    duration: 300,              // длина действия сцены в пикселях
    offset: 50                  // смещение относительно триггера
})
.setPin("#animate")             // фиксирует элемент на время сцены
.addTo(controller);

Ключевые параметры Scene:

  • triggerElement — элемент, при появлении которого на экране запускается сцена. Может быть CSS-селектором или DOM-узлом.
  • duration — продолжительность действия сцены. Если не задана, событие срабатывает мгновенно.
  • offset — смещение триггера по оси Y.
  • reverse — булево значение, определяет, будет ли сцена срабатывать при прокрутке обратно. По умолчанию true.

Управление фокусом через события

ScrollMagic предоставляет систему событий, которые позволяют точно контролировать поведение элементов:

  • enter — событие срабатывает, когда прокрутка достигает триггера.
  • leave — срабатывает, когда сцена покидается.
  • start и end — более точное отслеживание момента начала и окончания сцены.
  • progress — событие прогресса сцены, полезно для синхронизации анимаций.

Пример привязки событий к сцене:

scene.on("enter", function (event) {
    console.log("Сцена активирована");
});

scene.on("leave", function (event) {
    console.log("Сцена покинута");
});

scene.on("progress", function (event) {
    console.log("Прогресс сцены: " + event.progress);
});

Фиксация элементов и управление их положением

Метод .setPin() позволяет закрепить элемент на время действия сцены. Это особенно важно для фокус-менеджмента, когда нужно удерживать внимание пользователя на определенном контенте:

scene.setPin("#fixed-element", {pushFollowers: false});
  • pushFollowers — контролирует, будут ли смещаться последующие элементы. Если false, остальные блоки остаются на месте, создавая эффект наложения.

Интеграция с анимациями

Для динамичного фокус-менеджмента часто используется сочетание ScrollMagic с GSAP или CSS-анимациями:

var tween = gsap.to("#animate", {x: 500, rotation: 360, duration: 2});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 400
})
.setTween(tween)
.addTo(controller);
  • .setTween() связывает анимацию с сценой, позволяя ей изменяться пропорционально прокрутке.
  • Можно комбинировать несколько анимаций и сцен для создания сложного фокусного поведения на странице.

Логика последовательного фокусирования

ScrollMagic позволяет создавать цепочки сцен, обеспечивая плавный переход внимания пользователя между элементами:

var scenes = [];
var triggers = document.querySelectorAll(".section");

triggers.forEach(function(trigger, index) {
    var scene = new ScrollMagic.Scene({
        triggerElement: trigger,
        duration: 300
    })
    .setClassToggle(trigger, "active") // добавление класса для фокуса
    .addTo(controller);

    scenes.push(scene);
});
  • .setClassToggle() — автоматически добавляет или убирает класс, визуально выделяя текущий элемент.
  • Такой подход позволяет реализовать пошаговое скролл-прокручивание и управлять вниманием пользователя.

Адаптивный фокус

ScrollMagic поддерживает динамическое изменение параметров сцен в зависимости от размера экрана или состояния DOM:

function updateScene(scene) {
    if(window.innerWidth < 768){
        scene.duration(200);
    } else {
        scene.duration(400);
    }
}

window.addEventListener("resize", function() {
    scenes.forEach(updateScene);
});
  • Позволяет поддерживать корректный фокус и анимации на мобильных и десктопных устройствах.
  • Динамическое управление продолжительностью и смещением триггеров предотвращает потерю внимания пользователя.

Управление сложными интерфейсами

В больших проектах можно создавать множественные контроллеры для разных секций страницы:

var headerController = new ScrollMagic.Controller();
var contentController = new ScrollMagic.Controller({vertical: false});
  • Разделение контроллеров позволяет оптимизировать производительность.
  • Разные секции могут иметь независимые фокусные сценарии, сцены и анимации.

Важные практики

  • Использовать .setPin() экономно, так как слишком много фиксированных элементов могут замедлить рендеринг.
  • События enter и leave идеально подходят для подгрузки данных или запуска тяжелых анимаций.
  • Для сложных анимаций лучше применять GSAP и связывать их с прокруткой через .setTween().
  • Контролировать прогресс сцены через scene.progress() позволяет синхронизировать несколько анимаций одновременно.

Фокус-менеджмент в ScrollMagic строится на грамотной комбинации сцен, событий и анимаций, что позволяет точно направлять внимание пользователя по мере прокрутки страницы и создавать интерактивные, живые интерфейсы.

Оглавление