Множественные классы

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

Создание сцены для нескольких элементов

Обычно сцена создаётся с привязкой к триггеру (triggerElement) и определённой позиции прокрутки (triggerHook). Для работы с несколькими элементами часто используют селекторы CSS с несколькими классами или общим родительским элементом:

var controller = new ScrollMagic.Controller();

var scenes = document.querySelectorAll('.animate-item');

scenes.forEach(function(item) {
    var scene = new ScrollMagic.Scene({
        triggerElement: item,
        triggerHook: 0.8
    })
    .setClassToggle(item, 'visible')
    .addTo(controller);
});

В этом примере каждый элемент с классом .animate-item получает класс .visible при достижении нужной позиции прокрутки. Ключевой момент — forEach позволяет обрабатывать нефиксированное количество элементов, обеспечивая масштабируемость.

Использование нескольких классов на одном элементе

Метод .setClassToggle() поддерживает добавление нескольких классов одновременно, если их передать строкой через пробел:

var scene = new ScrollMagic.Scene({
    triggerElement: '#section1',
    triggerHook: 0.5
})
.setClassToggle('#section1', 'fade-in slide-up')
.addTo(controller);

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

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

Для более сложных анимаций часто требуется добавлять классы на основании состояния страницы. ScrollMagic позволяет использовать событие enter и leave для кастомного управления классами:

var scene = new ScrollMagic.Scene({
    triggerElement: '#section2',
    duration: 200
})
.on('enter', function() {
    document.querySelector('#section2').classList.add('active', 'highlight');
})
.on('leave', function() {
    document.querySelector('#section2').classList.remove('active', 'highlight');
})
.addTo(controller);

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

Комбинация с Timeline для сложных последовательностей

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

var timeline = new TimelineMax();
timeline
    .to('#box1', 1, {x: 100, className: '+=highlight'})
    .to('#box2', 1, {y: 50, className: '+=fade-in'}, '-=0.5');

var scene = new ScrollMagic.Scene({
    triggerElement: '#container',
    triggerHook: 0.7,
    duration: 300
})
.setTween(timeline)
.addTo(controller);

Использование className: '+=...' позволяет добавлять новые классы без удаления существующих, что важно при комплексных анимациях с множественными состояниями элементов.

Работа с группами элементов через селекторы

Иногда необходимо одновременно изменять классы нескольких элементов, объединённых общим селектором:

var scene = new ScrollMagic.Scene({
    triggerElement: '#features',
    triggerHook: 0.6
})
.on('enter', function() {
    document.querySelectorAll('.feature').forEach(function(el) {
        el.classList.add('active', 'highlight');
    });
})
.on('leave', function() {
    document.querySelectorAll('.feature').forEach(function(el) {
        el.classList.remove('active', 'highlight');
    });
})
.addTo(controller);

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

Оптимизация и производительность

При работе с множественными классами важно учитывать эффективность работы с DOM:

  • Использовать document.querySelectorAll один раз, сохранять NodeList для повторного использования.
  • Минимизировать количество созданных сцен, объединяя несколько элементов под одну сцену, если это возможно.
  • Использовать CSS-переходы для анимации классов вместо постоянного JS-манипулирования стилями.

Резюме по множественным классам

  • setClassToggle поддерживает одновременное добавление нескольких классов.
  • События enter и leave позволяют динамически управлять классами.
  • Интеграция с GSAP через Timeline позволяет комбинировать анимацию и классы.
  • Обработка групп элементов через циклы forEach обеспечивает синхронное изменение состояний.
  • Оптимизация DOM-операций критична для производительности при работе с большим количеством элементов.

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

Оглавление