Управление z-index

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

1. Позиционирование и контекст наложения

Чтобы z-index работал корректно, необходимо помнить о контексте наложения, создаваемом CSS:

  • Элемент с position: relative, absolute или fixed и заданным z-index создаёт локальный контекст для своих дочерних элементов.
  • Значение z-index имеет смысл только для позиционированных элементов (position отличное от static).
  • Для ScrollMagic часто используется position: relative у контейнера сцен, чтобы обеспечить правильное наложение блоков при анимации.

Пример:

.scene {
  position: relative;
  z-index: 10;
}
.pin {
  position: absolute;
  z-index: 20;
}

В этом примере .pin будет отображаться поверх .scene, даже если они находятся в одном контейнере.

2. Пины и управление порядком отображения

Функция pin() в ScrollMagic временно фиксирует элемент при прокрутке. При этом важно понимать, что:

  • ScrollMagic автоматически добавляет обертку с классом .scrollmagic-pin-spacer.
  • Эта обертка наследует z-index родителя, если не указано иное.
  • Чтобы элемент, закрепленный функцией pin(), всегда был поверх других, нужно задать z-index на самом элементе или на обертке.

Пример настройки z-index при пине:

new ScrollMagic.Scene({
  triggerElement: "#section1",
  duration: 500
})
.setPin("#pinnedElement", { pushFollowers: false })
.addTo(controller);
#pinnedElement {
  position: relative;
  z-index: 50;
}
.scrollmagic-pin-spacer {
  z-index: 50; /* Явное совпадение с элементом */
}

Использование pushFollowers: false позволяет избежать сдвига элементов с более низким z-index.

3. Порядок сцен и наложение

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

  • Установить z-index через CSS на контейнерах сцен.
  • Присвоить z-index отдельным элементам, которые будут пинами или анимироваться.
  • Использовать position: relative/absolute для элементов с разными слоями.

Пример управления несколькими сценами:

// Сцена 1
new ScrollMagic.Scene({
  triggerElement: "#trigger1",
  duration: 300
})
.setPin("#element1")
.addTo(controller);

// Сцена 2 поверх первой
new ScrollMagic.Scene({
  triggerElement: "#trigger2",
  duration: 300
})
.setPin("#element2")
.addTo(controller);
#element1 { z-index: 10; position: relative; }
#element2 { z-index: 20; position: relative; }

В результате, даже если .element1 создается раньше, .element2 будет отображаться выше.

4. Анимации и динамическое изменение z-index

При использовании GSAP или других библиотек для анимации вместе с ScrollMagic, можно динамически менять z-index в процессе прокрутки:

const tween = gsap.to("#animatedElement", {
  duration: 1,
  y: 200,
  zIndex: 100
});

new ScrollMagic.Scene({
  triggerElement: "#trigger3",
  duration: 400
})
.setTween(tween)
.addTo(controller);

Важно, что CSS-свойство z-index должно быть доступно для анимируемого элемента (position: relative/absolute/fixed).

5. Практические рекомендации

  • Всегда задавать position для элементов, которым назначается z-index.
  • Стараться структурировать контейнеры и сцены так, чтобы z-index был предсказуем.
  • При множестве pinned элементов использовать разные z-index, чтобы избежать конфликтов и “мерцания” слоев.
  • Проверять обертку .scrollmagic-pin-spacer — иногда нужно задать z-index именно ей, чтобы pinned элемент корректно накладывался на другие.

6. Особенности для сложных макетов

Для макетов с перекрывающимися блоками и фиксированными элементами:

  • Использовать отдельные контейнеры для слоев с разными z-index.
  • Для элементов, которые должны перекрывать все остальные при пине, рекомендуется z-index > 1000.
  • При использовании setClassToggle или setTween с прозрачностью учитывать, что z-index не изменяет прозрачность, поэтому элементы с более высоким z-index могут визуально скрывать другие, даже если прозрачность меньше 1.

Управление z-index в ScrollMagic — это сочетание CSS-позиционирования, правильного назначения сцен и pinned элементов и при необходимости динамического изменения через анимации. Правильная организация этих слоев обеспечивает плавное и предсказуемое взаимодействие элементов на странице при скролле.

Оглавление