Семантическая разметка

Семантическая разметка является фундаментом при работе с библиотекой ScrollMagic. Она определяет структуру документа и позволяет библиотеке корректно отслеживать позиции элементов на странице для создания анимаций. Без правильной семантики взаимодействие ScrollMagic с DOM будет ограниченным и менее предсказуемым.

Ключевой принцип: каждый элемент, который участвует в скролл-анимации, должен быть логически обособлен и иметь уникальные идентификаторы или классы. Это упрощает создание триггеров и сцены анимаций.

Теги и их роль в ScrollMagic

<section> — основной контейнер для крупных блоков контента, которые часто становятся триггерными зонами.
<article> — используется для отдельных интерактивных единиц, особенно если планируется независимая анимация каждого блока.
<header> и <footer> — применяются для фиксированных зон или зон с параллакс-эффектом, которые ScrollMagic может отслеживать независимо от основного контента.
<div> с классами — универсальный способ оборачивать анимируемые элементы. Использование семантических тегов предпочтительно, но для декоративных блоков <div> остается стандартом.

Пример правильной семантики:

<section id="intro">
  <article class="feature" data-scroll>
    <h2>Заголовок</h2>
    <p>Описание функции или блока.</p>
  </article>
</section>

В данном случае атрибут data-scroll облегчает поиск элемента в JavaScript для создания сцены ScrollMagic.

Анатомия элемента для анимации

Каждый анимируемый элемент должен иметь:

Контейнер сцены — блок, на который навешивается ScrollMagic Scene. Обычно это <section> или <div> с уникальным классом или id.
Триггер — точка, где начинается анимация. Может быть отдельным вложенным элементом или самим контейнером.
Цель анимации — элемент, на который непосредственно воздействует Tween (GSAP) или CSS-класс.

Пример структуры для сцены с анимацией появления:

<section class="scene" id="scene1">
  <div class="trigger"></div>
  <div class="animate-me">Контент для анимации</div>
</section>

В ScrollMagic сцена будет отслеживать .trigger, а анимация будет применяться к .animate-me.

Использование `data-` атрибутов для семантики

Атрибуты data-* помогают отделить визуальные эффекты от логики документа:

data-scroll — отмечает элементы, которые будут участвовать в анимации.
data-duration — указывает длительность сцены в пикселях или процентах.
data-offset — задает смещение триггера относительно окна браузера.

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

<section data-scroll data-duration="500" data-offset="100">
  <h2>Анимируемый блок</h2>
  <p>Этот блок будет постепенно появляться при скролле.</p>
</section>

Использование таких атрибутов позволяет писать универсальные скрипты, где ScrollMagic автоматически считывает параметры из DOM.

Структурирование сложных страниц

На больших страницах с множеством анимаций важно:

Разделять блоки по смыслу с помощью <section> или <article>.
Присваивать каждому блоку уникальные идентификаторы.
Использовать вложенные контейнеры для сложных анимаций, где одна сцена может управлять несколькими Tween’ами.

Пример структуры:

<section id="features">
  <article class="feature" data-scroll>
    <h3>Особенность 1</h3>
    <p>Описание</p>
  </article>
  <article class="feature" data-scroll>
    <h3>Особенность 2</h3>
    <p>Описание</p>
  </article>
</section>

Каждая статья может иметь отдельную сцену в ScrollMagic или объединяться в одну с последовательной анимацией.

Взаимодействие с CSS и анимациями

Семантическая разметка облегчает:

Применение CSS-классов через ScrollMagic (.setClassToggle)
Анимацию через GSAP, используя TweenMax или TweenLite
Плавное управление длительностью и смещением сцены

Пример:

var controller = new ScrollMagic.Controller();

document.querySelectorAll('[data-scroll]').forEach(function(el){
  new ScrollMagic.Scene({
    triggerElement: el,
    duration: el.dataset.duration || 300,
    offset: el.dataset.offset || 0
  })
  .setClassToggle(el, 'visible')
  .addTo(controller);
});

Здесь семантическая разметка (data-scroll, data-duration, data-offset) напрямую управляет логикой анимации.