Условная активация сцен

В ScrollMagic сцена (Scene) — это объект, который определяет участок страницы, на котором будут происходить анимации или другие действия. Условная активация сцены позволяет запускать эти действия только при выполнении определённых условий, например, при достижении определённого элемента, при определённой ширине окна или при совпадении состояния приложения.

Ключевым элементом является свойство triggerElement и метод on, через которые задаются условия появления сцены и реакция на события.

Создание сцены с условием появления

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    triggerHook: 0.5, // Сцена активируется, когда элемент достигает середины экрана
    duration: 300 // Длительность сцены по прокрутке
})
.on("enter", function (event) {
    if (window.innerWidth > 768) { // Условие: ширина окна больше 768px
        document.querySelector("#section1").classList.add("active");
    }
})
.on("leave", function (event) {
    document.querySelector("#section1").classList.remove("active");
})
.addTo(controller);

Ключевые моменты:

  • triggerHook определяет точку появления сцены на экране: 0 — верх экрана, 1 — низ, 0.5 — центр.
  • Событие enter срабатывает при достижении triggerElement.
  • Событие leave срабатывает при уходе элемента за пределы активации.
  • Условие внутри обработчика позволяет контролировать активацию сцены в зависимости от любых параметров.

Активация сцены на основе видимости элемента

Для условной активации можно использовать проверку видимости элемента в области видимости окна:

function isElementVisible(el) {
    var rect = el.getBoundingClientRect();
    return rect.top >= 0 && rect.bottom <= window.innerHeight;
}

var scene = new ScrollMagic.Scene({
    triggerElement: "#feature",
    triggerHook: 1,
})
.on("enter", function () {
    var elem = document.querySelector("#feature");
    if (isElementVisible(elem)) {
        elem.classList.add("highlight");
    }
})
.addTo(controller);

Особенности подхода:

  • Проверка видимости позволяет включать анимацию только тогда, когда элемент полностью отображается на экране.
  • Метод getBoundingClientRect() возвращает координаты относительно окна браузера.

Использование условий с несколькими сценами

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

var sections = document.querySelectorAll(".section");

sections.forEach(function(section) {
    var scene = new ScrollMagic.Scene({
        triggerElement: section,
        triggerHook: 0.7,
        duration: 200
    })
    .on("enter", function () {
        if (!section.classList.contains("animated")) {
            section.classList.add("animated");
        }
    })
    .on("leave", function () {
        section.classList.remove("animated");
    })
    .addTo(controller);
});

Важные моменты:

  • Цикл forEach позволяет создавать сцены динамически для всех элементов с одинаковым классом.
  • Проверка наличия класса предотвращает повторное применение анимации при повторном входе сцены.
  • Условная активация помогает оптимизировать производительность на больших страницах.

Условная активация на основе прокрутки и пользовательского состояния

События сцены могут зависеть не только от положения элемента, но и от пользовательского состояния:

var userLoggedIn = true;

var scene = new ScrollMagic.Scene({
    triggerElement: "#premium-content",
    triggerHook: 0.6
})
.on("enter", function () {
    if (userLoggedIn) {
        document.querySelector("#premium-content").classList.add("visible");
    }
})
.addTo(controller);

Примечание:

  • Любое условие можно встроить внутрь обработчика событий сцены.
  • Это позволяет адаптировать интерфейс под состояние приложения без изменения базовой структуры ScrollMagic.

Комбинирование условий с TweenMax

Условная активация часто используется вместе с анимациями через GSAP (TweenMax / TweenLite):

var scene = new ScrollMagic.Scene({
    triggerElement: "#animate-box",
    triggerHook: 0.8,
    duration: 400
})
.on("enter", function () {
    if (window.innerHeight > 600) {
        TweenMax.to("#animate-box", 1, {opacity: 1, y: 0});
    }
})
.addTo(controller);

Особенности интеграции:

  • Условие внутри enter позволяет запускать анимацию только при подходящих условиях.
  • Можно сочетать несколько условий: размер экрана, видимость элемента, пользовательские состояния.

Отложенная активация сцен

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

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

function enableScene() {
    if (window.innerWidth > 1024) {
        scene.addTo(controller);
    }
}

window.addEventListener("resize", enableScene);
enableScene();

Применение:

  • Сцена создаётся заранее, но добавляется в контроллер только при выполнении условия.
  • Это снижает нагрузку на браузер и позволяет динамически управлять активацией анимаций.

Важные практические рекомендации

  • Использовать условные проверки внутри обработчиков вместо создания множества идентичных сцен с разными условиями.
  • Комбинировать triggerHook и duration для точного контроля момента активации.
  • Для оптимизации производительности проверять условия перед применением анимации, чтобы не нагружать страницу лишними вычислениями.
  • Сохранять состояние элемента через классы (.active, .animated) для предотвращения повторного срабатывания анимации.

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

Оглавление