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

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

Свойство scene.refresh()

Метод refresh() у объекта Scene позволяет вручную пересчитать все параметры сцены: положение триггера, длительность (duration), а также состояние активации. Это особенно полезно при динамическом изменении контента:

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

// После изменения контента:
scene.refresh();

Особенности метода refresh():

  • Пересчитывает высоту и положение триггерного элемента.
  • Пересчитывает duration сцены, если оно задано в процентах относительно высоты элемента.
  • Не вызывает повторной инициализации сцены, а лишь обновляет внутренние параметры.

Автоматическое обновление через controller.update()

ScrollMagic предоставляет объект Controller, который управляет всеми сценами. Контроллер имеет метод update(), вызываемый для пересчета всех подключённых сцен:

controller.update(true); // true — пересчитывать все сцены
  • Аргумент true заставляет контроллер обновить сцены независимо от текущего положения скролла.
  • Если сцена динамически добавляется на страницу после загрузки, вызов controller.update() гарантирует корректную активацию.

Опция refreshInterval

Контроллер ScrollMagic может автоматически обновлять сцены через определённый интервал времени. Для этого используется опция refreshInterval при создании контроллера:

var controller = new ScrollMagic.Controller({
    refreshInterval: 100 // миллисекунды
});
  • Значение указывается в миллисекундах.
  • Контроллер периодически вызывает пересчет всех сцен.
  • Полезно для страниц с анимациями на фоне или с элементами, которые изменяют размеры во время загрузки.

Рекомендации по использованию:

  • Устанавливать слишком маленький интервал неэффективно, может нагружать браузер.
  • Для статичного контента лучше использовать ручной scene.refresh().

Динамическое обновление при изменении размеров окна

Поскольку ScrollMagic опирается на положение элементов на странице, изменение размеров окна (window.resize) требует пересчета сцены. Обычно это реализуется так:

window.addEventListener("resize", function() {
    controller.update(true); // пересчет всех сцен при изменении размеров окна
});
  • Позволяет корректно поддерживать сцены с triggerHook и duration, зависящими от размеров экрана.
  • Особенно важно для адаптивного дизайна и мобильных устройств.

Взаимодействие с динамическим контентом

Если на странице элементы изменяются после загрузки (например, подгружается изображение или текст), автоматическое обновление предотвращает рассинхронизацию сцены:

  • scene.refresh() для конкретной сцены, когда известно, какой элемент изменился.
  • controller.update(true) для глобального пересчета всех сцен.
  • Использование refreshInterval для страниц с часто изменяющимся контентом.

Резюме ключевых моментов

  • scene.refresh() — обновление отдельной сцены после изменений в DOM.
  • controller.update(true) — глобальное обновление всех сцен контроллера.
  • refreshInterval — автоматическое обновление сцен через заданный интервал.
  • Обновления критичны для динамически изменяющихся страниц и адаптивного дизайна.
  • Комбинация этих методов позволяет поддерживать синхронность анимаций и корректное срабатывание триггеров независимо от изменений контента или размеров окна.
Оглавление