Пересчет при изменении размеров окна

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

Пересчет размеров сцены

Каждая сцена в ScrollMagic имеет параметры duration, triggerElement и offset, которые определяют момент начала и конца действия анимации. При изменении ширины или высоты окна эти параметры могут перестать соответствовать визуальному расположению элементов. Для автоматического пересчета используется метод scene.refresh().

Пример пересчета сцены при изменении окна:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 400
})
.setClassToggle("#section1", "visible")
.addTo(controller);

window.addEventListener("resize", function() {
  scene.refresh();
});

Важно: метод refresh() пересчитывает положение триггера и длину сцены на основе текущих размеров окна и положения элементов в документе. Без этого пересчета анимации могут срабатывать слишком рано или слишком поздно.

Автоматическое обновление всех сцен

Если в проекте много сцен, использование отдельного refresh() для каждой сцены становится неудобным. Контроллер ScrollMagic предоставляет метод controller.update(true), который пересчитывает все сцены, связанные с контроллером.

window.addEventListener("resize", function() {
  controller.update(true);
});

Параметр true указывает на полное обновление сцен с пересчетом всех высот и позиций. Это особенно важно при адаптивной верстке, где размеры блоков и шрифтов изменяются динамически.

Событие resize внутри ScrollMagic

Для более тонкой настройки можно использовать событие resize самого контроллера:

controller.on("resize", function() {
  controller.update(true);
});

Этот способ позволяет интегрировать пересчет сцен в существующую логику контроллера и гарантирует, что все триггеры корректно синхронизируются после изменения размеров окна.

Пересчет для сцен с динамическим содержимым

Если содержимое страницы динамически меняется (например, подгружается AJAX-контент или изменяются размеры изображений), простого resize может быть недостаточно. Для таких случаев рекомендуется использовать комбинацию scene.refresh() и наблюдателя за изменениями DOM через MutationObserver:

var observer = new MutationObserver(function() {
  controller.update(true);
});

observer.observe(document.body, { childList: true, subtree: true, attributes: true });

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

Тонкости работы с duration и triggerHook

  • Duration в пикселях: при изменении высоты окна или контента длина сцены фиксируется в пикселях. Если блок становится выше или ниже, необходимо пересчитывать сцену.
  • Duration в процентах: можно использовать вычисление длительности через JavaScript, исходя из высоты окна. Например:
scene.duration(function() {
  return window.innerHeight * 0.8;
});

Такой подход позволяет сцене оставаться адаптивной без необходимости постоянного ручного пересчета.

  • TriggerHook: положение триггера относительно видимой части окна также пересчитывается при refresh(). Если триггер фиксирован на верхней или нижней границе окна, пересчет обеспечит точное срабатывание анимации.

Практические рекомендации

  1. Использовать scene.refresh() для отдельных сцен, которые могут менять размеры динамически.
  2. Использовать controller.update(true) для пересчета всех сцен при изменении окна.
  3. Применять MutationObserver при динамическом контенте, чтобы избежать рассинхронизации анимаций.
  4. Вычислять duration через функции, если длина сцены должна зависеть от текущей высоты окна.
  5. Обновлять triggerHook через refresh() или пересоздавать сцену, если позиция триггера нестабильна.

Эффективная работа ScrollMagic при изменении размеров окна обеспечивает плавную, корректную и предсказуемую анимацию, независимо от устройства и динамики контента.

Оглавление