Orientation change

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

Использование события orientationchange

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

window.addEventListener('orientationchange', function() {
    // обновление контроллера ScrollMagic
    controller.update(true);
});

Пояснение:

  • controller.update(true) заставляет ScrollMagic пересчитать позиции всех сцен, что критично при изменении размеров окна или ориентации.
  • Если сцены зависят от размеров окна (triggerHook, duration и т.п.), без обновления их позиции может быть некорректной.

Адаптация длительности и триггеров

При смене ориентации размеры элементов могут изменяться. В ScrollMagic длительность сцены (duration) и положение триггера (triggerElement и triggerHook) можно динамически корректировать:

function adjustScene() {
    var isLandscape = window.innerWidth > window.innerHeight;

    if (isLandscape) {
        scene.duration(500);
        scene.triggerHook(0.3);
    } else {
        scene.duration(800);
        scene.triggerHook(0.5);
    }

    controller.update(true);
}

window.addEventListener('orientationchange', adjustScene);
window.addEventListener('resize', adjustScene);

Особенности:

  • Проверка window.innerWidth > window.innerHeight позволяет определить текущую ориентацию.
  • Использование одного обработчика для resize и orientationchange упрощает поддержку различных браузеров и устройств.
  • scene.duration() и scene.triggerHook() могут быть изменены в любое время до и во время скролла, если сцена ещё активна.

Пересоздание сцены при кардинальных изменениях

В некоторых случаях пересчёт параметров сцены может быть недостаточным, если элементы DOM изменяют размер или положение при смене ориентации. Тогда логичнее пересоздавать сцены:

function rebuildScenes() {
    controller.destroy(true); // удаляем все сцены и слушатели
    controller = new ScrollMagic.Controller();

    scene = new ScrollMagic.Scene({
        triggerElement: "#section",
        duration: calculateDuration(),
        triggerHook: calculateTriggerHook()
    })
    .setTween("#animate", {x: 300})
    .addTo(controller);
}

window.addEventListener('orientationchange', rebuildScenes);

Пояснения:

  • controller.destroy(true) полностью очищает все сцены, что позволяет избежать конфликтов после изменения размеров.
  • Пересоздание сцен актуально при сложной верстке с динамическим контентом, когда положение элементов меняется не только по ширине или высоте, но и по структуре DOM.

Рекомендации по оптимизации

  1. Дебаунс обработчиков событий: При повороте устройства часто генерируется несколько событий подряд. Для уменьшения нагрузки на ScrollMagic рекомендуется использовать дебаунс:
let resizeTimeout;
window.addEventListener('orientationchange', function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => {
        adjustScene();
    }, 200);
});

  1. Использование процентных размеров: Если сцены зависят от размеров окна, лучше задавать duration и позицию триггера в процентах (window.innerHeight * 0.8) вместо фиксированных пикселей.

  2. Слежение за контейнерами: Для адаптивной верстки рекомендуется проверять не только размеры окна, но и размеры контейнеров, внутри которых расположены сцены. Иногда ориентация влияет больше на родительский блок, чем на само окно.

Практические сценарии применения

  • Плавное смещение элементов при переходе с портретной на ландшафтную ориентацию, например для слайдеров или панорамных блоков.
  • Корректировка длительности анимаций при изменении высоты экрана.
  • Обновление визуальных эффектов, зависящих от позиции триггеров, чтобы сохранить синхронизацию с прокруткой.

Изменение ориентации устройства в ScrollMagic требует внимательного подхода к контроллеру и сценам. Использование обновления через controller.update(), динамического изменения параметров и, при необходимости, пересоздания сцен позволяет поддерживать точную анимацию вне зависимости от размера и ориентации экрана.

Оглавление