Viewport на мобильных

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

Основные особенности viewport на мобильных

  1. Высота экрана (window.innerHeight) На мобильных устройствах высота viewport динамическая. При прокрутке браузер может скрывать или показывать адресную строку, что изменяет window.innerHeight. Это влияет на позиционирование сцен и триггеров. ScrollMagic использует текущее значение window.innerHeight при инициализации, но для динамически изменяющихся сцен стоит обновлять контроллер.

  2. Динамическая ширина (window.innerWidth) Мобильные браузеры могут изменять ширину viewport при повороте устройства (landscape/portrait). Если сцены зависят от ширины или используют triggerHook относительно стороны экрана, важно учитывать события resize и корректно пересоздавать или обновлять сцены.

  3. Прокрутка и momentum scrolling На iOS и некоторых Android-браузерах используется «инерционная» прокрутка (momentum scrolling). Это значит, что события scroll могут срабатывать с задержкой, а ScrollMagic должен корректно учитывать завершение инерции, чтобы сцены с анимацией не дёргались.

Настройка контроллера ScrollMagic для мобильного

var controller = new ScrollMagic.Controller({
  vertical: true,
  globalSceneOptions: {
    triggerHook: 0.8, // сцена срабатывает на 80% высоты viewport
    reverse: true
  }
});
  • triggerHook важно настраивать в зависимости от высоты мобильного экрана. Для маленьких экранов часто используют значения 0.7–0.9, чтобы элементы успевали появляться до того, как станут полностью видимыми.
  • reverse: true позволяет анимации возвращаться при скролле обратно, что важно для адаптивного UX на мобильных.

Обновление сцен при изменении размеров экрана

window.addEventListener('resize', function() {
  controller.update(true);
});
  • controller.update(true) пересчитывает позиции всех сцен относительно нового viewport. Это необходимо при повороте экрана или изменении размера окна.

Использование triggerElement и triggerHook на мобильных

  • triggerElement — DOM-элемент, относительно которого запускается сцена. На мобильных важно учитывать высоту элементов и динамическое масштабирование шрифтов, чтобы triggerElement срабатывал корректно.

  • triggerHook — точка на viewport, в которой сцена активируется. Примеры значений:

    • 0 — верхняя граница viewport
    • 0.5 — середина экрана
    • 1 — нижняя граница viewport

Для мобильного UX обычно выбирают 0.8–0.9, чтобы элемент успевал появиться до прокрутки к следующему блоку.

Работа с фиксированными элементами (pinning)

var scene = new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: "100%"
})
.setPin("#section1")
.addTo(controller);
  • duration на мобильных может быть задан в пикселях или процентах от viewport. Проценты удобны, так как позволяют сцене адаптироваться к разной высоте экранов.
  • При использовании pin на iOS и Android необходимо проверять поведение position: fixed, так как браузеры иногда корректируют фиксированные блоки во время инерционной прокрутки.

Работа с адаптивными анимациями

  • На мобильных часто применяются упрощённые анимации из-за ограниченной производительности.
  • Можно использовать условные конструкции по window.innerWidth для изменения параметров сцены:
if(window.innerWidth < 768){
  scene.duration(200); // уменьшение длительности сцены на мобильных
  scene.triggerHook(0.9);
}

Практические советы

  1. Тестировать на реальных устройствах — эмуляторы не всегда точно отображают поведение viewport и прокрутки.
  2. Использовать requestAnimationFrame при сложных анимациях, чтобы избежать лагов на мобильных.
  3. Обновлять контроллер при динамическом изменении контента — изображения, загруженные асинхронно, меняют размеры элементов, что может сдвигать триггеры.

Итоговые рекомендации по viewport для ScrollMagic на мобильных

  • Всегда учитывать динамическую высоту window.innerHeight.
  • Настраивать triggerHook в диапазоне 0.7–0.9 для плавного появления элементов.
  • Пересчитывать сцены при resize и изменениях контента.
  • Использовать процентные значения для duration, чтобы сцены были адаптивными.
  • Тестировать на устройствах с разными браузерами и системами, учитывая особенности прокрутки и фиксированных элементов.

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

Оглавление