Метод setClassToggle

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

Синтаксис метода выглядит следующим образом:

scene.setClassToggle(element, className);
  • element — селектор или DOM-элемент, к которому будет применяться класс. Может быть строкой CSS-селектора ("#myDiv"), либо самим объектом DOM (document.getElementById("myDiv")).
  • className — строка с именем CSS-класса, который будет добавляться при активации сцены и удаляться при деактивации.

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

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

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

В этом примере:

  • Сцена активируется, когда верх элемента #trigger достигает верхней границы окна просмотра.
  • Класс active добавляется к элементу #animateMe.
  • Класс автоматически удаляется, когда сцена выходит за пределы видимой области или заканчивается.

Параметры сцены, влияющие на работу setClassToggle

  1. triggerElement Определяет, какой элемент будет выступать триггером. Можно использовать любой CSS-селектор или DOM-объект. Если triggerElement не указан, триггером становится body.

  2. duration Определяет, на какой длине прокрутки сцена остаётся активной. Если duration равен 0 (по умолчанию), класс добавляется мгновенно при достижении триггера и убирается сразу, как только элемент покидает триггерную точку.

  3. triggerHook Задаёт точку на экране, в которой сцена активируется. Значение от 0 до 1, где 0 — верх экрана, 1 — низ экрана, 0.5 — центр.

Пример с triggerHook:

var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger",
  triggerHook: 0.5 // сцена активируется, когда триггер достигает центра окна
})
.setClassToggle("#animateMe", "active")
.addTo(controller);

Применение для сложных анимаций

Метод setClassToggle особенно удобен для запуска CSS-анимаций и переходов. Вместо привязки JavaScript-анимаций к событию скролла, достаточно задать нужные свойства через CSS:

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

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

В сочетании с ScrollMagic это создаёт плавный эффект появления и движения элемента при прокрутке страницы.

Комбинирование нескольких setClassToggle

Можно создавать несколько сцен для одного элемента с разными триггерами и классами. Например:

var scene1 = new ScrollMagic.Scene({
  triggerElement: "#section1"
})
.setClassToggle("#animateMe", "fade-in")
.addTo(controller);

var scene2 = new ScrollMagic.Scene({
  triggerElement: "#section2"
})
.setClassToggle("#animateMe", "slide-up")
.addTo(controller);

В результате элемент #animateMe будет последовательно получать разные классы при достижении каждой новой секции.

Особенности работы

  • Если сцена активна на протяжении определённого duration, класс остаётся до конца сцены.
  • setClassToggle работает на основе добавления и удаления классов автоматически — нет необходимости вручную отслеживать события скролла.
  • Можно использовать с любыми CSS-классами, включая сложные анимационные библиотеки (например, animate.css) для мгновенного запуска эффектов.

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

  1. Минимизировать количество сцен с коротким duration, чтобы не перегружать DOM событиями добавления/удаления классов.
  2. Использовать CSS-переходы или анимации вместо JavaScript-анимаций для повышения производительности.
  3. Применять triggerHook для тонкой настройки момента активации класса и достижения требуемого визуального эффекта.
  4. Проверять взаимодействие нескольких сцен на одном элементе, чтобы классы не конфликтовали между собой.

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

Оглавление