Переключение классов

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

Для начала создаётся экземпляр контроллера:

var controller = new ScrollMagic.Controller();

Контроллер отвечает за управление всеми сценами на странице.

Создание сцены с классом

Основной строительный блок — ScrollMagic.Scene. Он определяет, когда и где должно произойти добавление или удаление класса.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger", // элемент, который вызывает действие
    triggerHook: 0.5,           // позиция триггера на экране (0 — верх, 1 — низ)
    duration: 200               // длина действия сцены в пикселях
})
.setClassToggle("#animate", "active") // элемент и класс для переключения
.addTo(controller);                   // добавление сцены в контроллер

Пояснение параметров:

  • triggerElement — элемент DOM, при достижении которого запускается сцена.
  • triggerHook — точка экрана, где срабатывает сцена. Значение от 0 до 1.
  • duration — протяжённость сцены в пикселях, в течение которой класс остаётся активным.
  • setClassToggle — метод для добавления или удаления класса на целевом элементе.

Контроль длительности эффекта

Длительность сцены играет ключевую роль при управлении классами. Если duration = 0, класс добавляется и удаляется мгновенно при пересечении триггера. Если значение положительное, класс остаётся активным, пока пользователь прокручивает указанный диапазон.

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

В этом примере класс highlight будет оставаться активным, пока пользователь прокручивает 300 пикселей после достижения элемента #section1.

Множественные сцены и элементы

ScrollMagic поддерживает одновременное использование нескольких сцен для разных элементов или даже одного элемента с разными классами. Это позволяет создавать сложные интерактивные эффекты.

var scene1 = new ScrollMagic.Scene({
    triggerElement: "#sectionA"
})
.setClassToggle("#boxA", "visible")
.addTo(controller);

var scene2 = new ScrollMagic.Scene({
    triggerElement: "#sectionB"
})
.setClassToggle("#boxB", "visible")
.addTo(controller);

Каждая сцена работает независимо и реагирует на свои триггеры.

Динамическое изменение классов

С помощью событий сцены можно более гибко управлять классами, используя слушатели событий enter, leave и progress.

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger"
})
.on("enter", function () {
    document.querySelector("#animate").classList.add("entered");
})
.on("leave", function () {
    document.querySelector("#animate").classList.remove("entered");
})
.addTo(controller);
  • enter — событие срабатывает при входе триггера в видимую область.
  • leave — событие срабатывает при выходе триггера.
  • progress — возвращает прогресс сцены от 0 до 1, полезно для анимаций с постепенным изменением классов или стилей.

Интеграция с CSS-анимациями

Чаще всего переключение классов используется совместно с CSS-анимациями. Это позволяет создавать плавные эффекты без сложного JavaScript.

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

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

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

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

  • Использовать уникальные идентификаторы для триггеров и анимируемых элементов, чтобы избежать конфликтов.
  • Длительность сцены задавать в зависимости от требуемого визуального эффекта.
  • Для сложных анимаций сочетать setClassToggle с событиями progress для более точного контроля.
  • Проверять работу на разных размерах экранов — триггер и hook могут требовать адаптации.

Примеры продвинутого применения

  1. Постепенное изменение цвета фона секции
new ScrollMagic.Scene({
    triggerElement: "#sectionColor",
    duration: 500
})
.on("progress", function(e) {
    document.body.style.backgroundColor = `rgba(255, 0, 0, ${e.progress})`;
})
.addTo(controller);
  1. Множественные классы для одного элемента
var scene = new ScrollMagic.Scene({ triggerElement: "#trigger" })
.setClassToggle("#multi", "step1 step2")
.addTo(controller);

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

Оглавление