Система координат и позиционирование

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

Координаты в ScrollMagic

В ScrollMagic используются две основные системы координат:

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

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

Позиционирование элементов

ScrollMagic тесно взаимодействует с CSS-позиционированием. Различают несколько типов:

  • static (по умолчанию) Элемент следует нормальному потоку документа. ScrollMagic корректно определяет его положение, но для анимаций, связанных с фиксацией, требуется изменение позиции на relative или absolute.

  • relative Элемент смещается относительно своего нормального положения. Используется при смещении триггеров или динамическом изменении координат во время скролла.

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

  • fixed Элемент фиксируется относительно окна браузера. ScrollMagic часто комбинирует fixed с «pinning», чтобы закреплять элемент на экране на время прокрутки сцены.

Триггеры и точки срабатывания

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

  1. triggerElement Элемент, относительно которого рассчитывается момент активации сцены. Местоположение триггера учитывается в координатах документа.

  2. triggerHook Определяет точку на экране, при которой сцена срабатывает. Может принимать значения от 0 (верх окна) до 1 (низ окна). Например:

    var scene = new ScrollMagic.Scene({
    triggerElement: "#section",
    triggerHook: 0.5
});

    В этом примере сцена активируется, когда середина элемента #section достигнет середины окна браузера.

Pinning и изменение координат

Pinning (scene.setPin) позволяет фиксировать элемент на экране на время прокрутки сцены. При этом ScrollMagic автоматически управляет смещением элемента:

var scene = new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: 500
})
.setPin("#header")
.addTo(controller);
  • duration задаёт длину сцены в пикселях прокрутки. Элемент остаётся зафиксированным до достижения конца этой длины.
  • ScrollMagic рассчитывает координаты динамически, учитывая высоту и смещения родительских элементов.

Учет смещений и margin

ScrollMagic принимает в расчет высоту элемента, margin и padding, но для точного позиционирования важно:

  • Не использовать отрицательные margin без необходимости, так как они могут сдвигать триггер за пределы ожидаемой области.
  • При комбинировании pinning с анимацией учитывать смещение от родительских контейнеров (offsetTop) и возможные scrollTop страницы.

Адаптивность и координаты

Для разных разрешений экрана координаты элементов изменяются. ScrollMagic поддерживает адаптивные триггеры:

  • triggerHook можно задавать в процентах, чтобы сцена срабатывала одинаково на любых экранах.
  • Для сложных макетов рекомендуется использовать вычисление позиции через JavaScript перед созданием сцены:
var topPosition = document.querySelector("#element").getBoundingClientRect().top + window.scrollY;

Это гарантирует, что триггер сработает корректно независимо от размеров и прокрутки.

Координация с анимациями

Понимание системы координат необходимо для синхронизации с анимационными библиотеками, такими как GSAP. ScrollMagic использует координаты для:

  • Запуска анимаций при достижении определённой точки на экране.
  • Управления длительностью анимации через duration.
  • Определения прогресса анимации через scene.progress(), что напрямую зависит от координат прокрутки относительно триггера.

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

  • Проверять координаты элементов через getBoundingClientRect() и offsetTop.
  • Использовать triggerHook для точного контроля срабатывания сцены на разных экранах.
  • При pinning учитывать высоту сцены (duration) и смещения, чтобы не создавать неожиданных скачков элементов.
  • Комбинировать ScrollMagic с CSS-позиционированием relative, absolute или fixed для точного контроля движения объектов.

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

Оглавление