Удаление классов

ScrollMagic предоставляет гибкие средства для управления классами HTML-элементов при скролле страницы. Это позволяет создавать интерактивные эффекты, динамически изменять внешний вид элементов и запускать анимации. Основным инструментом для работы с классами является метод setClassToggle, который соединяет элемент с триггером сцены.

Метод setClassToggle

Метод setClassToggle добавляет или удаляет класс у DOM-элемента в момент пересечения сцены с триггером. Синтаксис:

scene.setClassToggle(element, className);
  • element — CSS-селектор или ссылка на DOM-элемент.
  • className — имя класса, которое будет добавляться при активации сцены и удаляться при её деактивации.

Пример использования:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: 200
})
.setClassToggle("#section1", "active")
.addTo(controller);

В этом примере класс active добавляется к элементу #section1, когда верхняя граница триггерного элемента достигает верхней границы окна, и удаляется, когда элемент покидает область видимости.

Удаление классов вручную

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

document.querySelector("#section1").classList.remove("active");

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

scene.on("enter", function() {
    document.querySelector("#section2").classList.remove("hidden");
});
scene.on("leave", function() {
    document.querySelector("#section2").classList.add("hidden");
});
  • enter — срабатывает, когда сцена активируется.
  • leave — срабатывает, когда сцена деактивируется.

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

Комбинирование с другими сценами

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

var scene1 = new ScrollMagic.Scene({ triggerElement: "#section1" })
    .setClassToggle("#box", "highlight")
    .addTo(controller);

var scene2 = new ScrollMagic.Scene({ triggerElement: "#section2" })
    .on("enter", function() {
        document.querySelector("#box").classList.remove("highlight");
    })
    .addTo(controller);

Здесь при активации первой сцены элемент #box получает класс highlight, а при достижении второй сцены этот класс удаляется вручную.

Динамическое удаление классов в зависимости от направления скролла

ScrollMagic позволяет определить направление прокрутки с помощью объекта события. Это дает возможность удалять классы только при скролле вверх или вниз.

scene.on("update", function(e) {
    if(e.scrollDirection === "REVERSE") {
        document.querySelector("#header").classList.remove("visible");
    }
});
  • e.scrollDirection возвращает "FORWARD" или "REVERSE".
  • Удаление класса срабатывает только при обратном скролле.

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

Удаление нескольких классов одновременно

Для управления несколькими стилями можно удалять сразу несколько классов через classList.remove с передачей нескольких аргументов:

document.querySelector("#menu").classList.remove("active", "highlight", "fixed");

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

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

  • Использовать setClassToggle для автоматического добавления и удаления классов в пределах одной сцены.
  • Для сложной логики, когда один элемент управляется несколькими сценами, применять события enter, leave и update.
  • Для анимаций и динамических интерфейсов комбинировать ScrollMagic с CSS-классами вместо прямого изменения стилей через JavaScript.
  • Контролировать направление скролла, чтобы удалять классы только при определённом движении страницы.

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

Оглавление