Добавление классов

ScrollMagic предоставляет удобный механизм управления CSS-классами на элементах страницы в зависимости от положения прокрутки. Ключевым компонентом здесь является Scene, который позволяет задать триггер и управлять поведением элементов при достижении определённой позиции на странице.

Создание сцены для добавления класса

Для добавления класса используется метод .setClassToggle(). Он принимает два аргумента:

  1. селектор или DOM-элемент, к которому будет применяться класс.
  2. имя CSS-класса, который будет добавлен при активации сцены.

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

// Создание контроллера ScrollMagic
var controller = new ScrollMagic.Controller();

// Создание сцены
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, при прокрутке до которого срабатывает сцена
    duration: 200 // длина сцены в пикселях, на протяжении которой класс остаётся активным
})
.setClassToggle("#animateMe", "active") // добавление класса
.addTo(controller); // добавление сцены в контроллер

В этом примере при достижении элемента #trigger класс active добавляется к элементу #animateMe и остаётся активным в течение 200 пикселей прокрутки.

Управление длительностью эффекта

Параметр duration определяет, как долго класс будет оставаться активным. Если duration равен 0, класс будет добавлен только в момент триггера, а затем сразу удалён, когда элемент выйдет из видимой области.

Пример:

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 0 // мгновенное добавление класса
})
.setClassToggle("#animateMe", "highlight")
.addTo(controller);

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

Использование нескольких классов

Можно добавлять разные классы к разным элементам через несколько вызовов .setClassToggle() или создавать несколько сцен для одного элемента. Пример с разными элементами:

new ScrollMagic.Scene({ triggerElement: "#section1" })
    .setClassToggle("#box1", "visible")
    .addTo(controller);

new ScrollMagic.Scene({ triggerElement: "#section2" })
    .setClassToggle("#box2", "visible")
    .addTo(controller);

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

Связывание с анимациями CSS

Добавление класса часто используется совместно с CSS-анимациями. Например, в CSS можно определить анимацию:

#animateMe {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.5s ease-out;
}

#animateMe.active {
    opacity: 1;
    transform: translateY(0);
}

При активации сцены ScrollMagic автоматически добавит класс active, и элемент плавно проявится с анимацией.

Контроль сцены через события

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

  • enter — сцена активируется.
  • leave — сцена деактивируется.
  • start и end — начало и конец сцены.

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

scene.on("enter", function () {
    document.querySelector("#animateMe").classList.add("in-view");
});

scene.on("leave", function () {
    document.querySelector("#animateMe").classList.remove("in-view");
});

Такой подход позволяет гибко управлять классами, независимо от .setClassToggle().

Логика сочетания с другими сценами

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

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

  • Использовать селекторы с уникальными идентификаторами для избежания конфликтов.
  • Комбинировать .setClassToggle() с CSS-переходами для плавной анимации.
  • Для сложных анимаций рассматривать совместное использование с библиотеками GSAP, которые легко интегрируются с ScrollMagic.
  • Тщательно продумывать duration, чтобы класс не исчезал преждевременно или не оставался слишком долго.

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

Оглавление