Нормализация значений

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

Принцип работы нормализации

ScrollMagic использует объекты Scene, в которых можно отслеживать прогресс анимации через метод progress(). Значение прогресса — это нормализованное число, где:

  • 0 соответствует стартовой позиции сцены.
  • 1 соответствует окончанию сцены.

Пример:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
  duration: 500,  // высота сцены в пикселях
  offset: 100     // смещение от верхней границы страницы
})
.setPin("#pinElement")
.addTo(controller);

scene.on("progress", function(event) {
  console.log(event.progress); // вывод значения от 0 до 1
});

Здесь event.progress автоматически нормализуется в диапазон [0, 1], что облегчает работу с анимациями независимо от абсолютного пиксельного значения скролла.

Применение нормализации в анимациях

Нормализованное значение удобно использовать совместно с библиотеками анимаций, например GSAP. Так как GSAP анимации также используют диапазон [0, 1] для метода progress(), можно напрямую привязать прокрутку к анимации.

var tween = gsap.to("#box", {x: 500, duration: 1});

scene.setTween(tween);

scene.on("progress", function(event) {
  tween.progress(event.progress);
});

В данном примере event.progress выступает как нормализованный коэффициент анимации, позволяя плавно изменять положение элемента при скролле.

Кастомная нормализация значений

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

[ = ]

Пример:

function normalizeScroll(scroll, start, end) {
  return Math.min(Math.max((scroll - start) / (end - start), 0), 1);
}

scene.on("update", function(event) {
  var normalized = normalizeScroll(event.scrollPos, scene.scrollOffset(), scene.scrollOffset() + scene.duration());
  console.log(normalized);
});

Здесь Math.min и Math.max гарантируют, что нормализованное значение всегда остаётся в диапазоне [0, 1], даже если скролл выходит за пределы сцены.

Использование кривых и easing на нормализованных значениях

Нормализованное значение можно обрабатывать с кривыми или функциями easing для более динамичных эффектов:

function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

scene.on("progress", function(event) {
  var eased = easeInOutQuad(event.progress);
  gsap.to("#circle", {y: 400 * eased, duration: 0});
});

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

Связь нормализации с событиями ScrollMagic

ScrollMagic предоставляет несколько событий, где нормализованные значения применяются по-разному:

  • progress — значение [0,1] показывает прогресс сцены.
  • update — текущее положение скролла (scrollPos) можно преобразовать в нормализованное вручную.
  • enter / leave — служат для переключения состояний при достижении границ сцены, где нормализованное значение полезно для динамического контроля анимаций.

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

  • Всегда использовать нормализованные значения при работе с анимациями, чтобы избежать зависимости от конкретной высоты страницы.
  • При сложных сценах с несколькими триггерами можно создавать вспомогательные функции для нормализации, чтобы повторно использовать код.
  • Комбинировать нормализацию с easing-функциями для более естественных и отзывчивых эффектов.
  • Проверять, что нормализованное значение ограничено диапазоном [0,1], чтобы исключить баги на коротких или длинных страницах.

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

Оглавление