Параметр triggerHook

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

Формат и значения

triggerHook может принимать числовые значения от 0 до 1 или строки:

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

Также допускаются строковые значения:

  • "onEnter" — соответствует 1, срабатывает при появлении элемента в области просмотра.
  • "onCenter" — соответствует 0.5, триггер срабатывает по центру экрана.
  • "onLeave" — соответствует 0, триггер срабатывает при уходе элемента за верхнюю границу окна.

Синтаксис использования

При создании сцены ScrollMagic.Scene параметр triggerHook указывается в объекте конфигурации:

var scene = new ScrollMagic.Scene({
    triggerElement: "#myElement",
    triggerHook: 0.25, // срабатывание на 25% высоты окна сверху
    duration: 200
});

В этом примере событие сцены сработает, когда верх элемента #myElement достигнет 25% от высоты окна сверху.

Связь с triggerElement

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

Пример:

var scene = new ScrollMagic.Scene({
    triggerElement: ".section",
    triggerHook: "onEnter"
})
.setClassToggle(".section", "visible")
.addTo(controller);

Здесь класс "visible" добавится к .section, когда верх этой секции появится в области просмотра.

Использование с анимациями

triggerHook тесно связан с анимациями, управляемыми через GSAP или CSS:

var tween = gsap.from(".box", {opacity: 0, y: 100, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: ".box",
    triggerHook: 0.8
})
.setTween(tween)
.addTo(controller);

Особенности:

  • Чем меньше значение triggerHook, тем раньше срабатывает анимация при прокрутке вниз.
  • Чем больше значение, тем ближе к нижней части экрана элемент активирует анимацию.

Динамическое изменение triggerHook

triggerHook можно изменять после создания сцены с помощью метода .triggerHook():

scene.triggerHook(0.3); // меняем триггер на 30% от верха окна

Это удобно при адаптивном дизайне: для разных разрешений можно изменять точку срабатывания без пересоздания сцены.

Комбинация с duration

triggerHook определяет точку старта, а duration — протяжённость действия сцены. В сочетании они позволяют создавать эффекты, зависящие от скролла, например параллакс:

var scene = new ScrollMagic.Scene({
    triggerElement: "#parallax",
    triggerHook: 0.5,
    duration: "100%" // сцена длится на всю высоту окна
})
.setTween("#parallax img", {y: "-50%", ease: Linear.easeNone})
.addTo(controller);

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

  • Для эффекта постепенного появления элементов используйте triggerHook: 0.9 или onEnter.
  • Для центральных анимаций, таких как масштабирование или вращение, лучше triggerHook: 0.5 или onCenter.
  • Для фиксированных элементов, которые должны срабатывать при уходе за верх экрана, применяют triggerHook: 0 или onLeave.
  • Всегда проверяйте, что triggerElement корректно позиционирован в DOM, иначе triggerHook может работать неожиданно.

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

Оглавление