Параметр triggerElement

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

Основное назначение

triggerElement задаётся при инициализации сцены и может принимать:

  • CSS-селектор ("#section1", ".box"),
  • DOM-элемент (document.getElementById("section1")),
  • jQuery-объект ($(".box")).

Пример инициализации сцены с triggerElement:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при попадании которого срабатывает сцена
    duration: 200,              // продолжительность эффекта
    triggerHook: 0.5            // точка срабатывания на экране (50% от верхнего края)
})
.setClassToggle("#animate", "visible") // добавление класса
.addTo(controller);

В этом примере сцена активируется, когда элемент с id="trigger" достигает середины окна просмотра (triggerHook: 0.5).

Взаимодействие с triggerHook

Параметр triggerElement тесно связан с triggerHook, который определяет точку срабатывания сцены на экране:

  • 0 — верхняя граница окна;
  • 0.5 — центр экрана;
  • 1 — нижняя граница окна.

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

Использование с динамическими элементами

При динамическом создании контента важно учитывать, что triggerElement должен существовать в DOM на момент создания сцены. В противном случае ScrollMagic не сможет корректно вычислить координаты элемента.

Пример создания сцены после динамического добавления элемента:

var newElement = document.createElement("div");
newElement.id = "dynamic-trigger";
document.body.appendChild(newElement);

var scene = new ScrollMagic.Scene({
    triggerElement: "#dynamic-trigger",
    duration: 300
})
.setTween("#animate", {opacity: 1, y: 0})
.addTo(controller);

Особенности расчёта позиции

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

Если элемент находится внутри вложенного контейнера с прокруткой, стандартный triggerElement может не работать, и понадобится использование параметра container в контроллере:

var controller = new ScrollMagic.Controller({
    container: "#scroll-container" // контейнер с прокруткой
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#inside-container",
    triggerHook: 0.2
})
.addTo(controller);

Тонкости при множественных сценах

Когда на странице несколько сцен с одним и тем же triggerElement, каждая сцена активируется независимо, но может требоваться разная конфигурация triggerHook и duration, чтобы анимации не перекрывали друг друга.

new ScrollMagic.Scene({ triggerElement: "#shared-trigger", triggerHook: 0.3 })
    .setTween("#anim1", {x: 100})
    .addTo(controller);

new ScrollMagic.Scene({ triggerElement: "#shared-trigger", triggerHook: 0.7 })
    .setTween("#anim2", {y: 100})
    .addTo(controller);

В этом примере первая сцена срабатывает раньше второй, создавая каскадный эффект.

Советы по оптимизации

  • Использовать селекторы вместо прямых DOM-объектов удобно, если элементы будут динамически добавляться.
  • Проверять видимость и размеры элемента перед добавлением сцены: getBoundingClientRect() помогает определить, правильно ли рассчитан triggerElement.
  • Для элементов вне основного потока страницы (например, модальные окна или скрытые панели) сцена с triggerElement сработает только после того, как элемент появится в DOM и станет видимым.

Заключение по параметру

triggerElement — это фундаментальный инструмент управления точкой активации сцены. Комбинируя его с triggerHook, duration и другими методами ScrollMagic (setTween, setClassToggle), можно создавать точные, плавные и синхронизированные анимации, привязанные к скроллу, без необходимости сложных вычислений координат вручную.

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

Оглавление