Пагинация на скролле

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

Инициализация контроллера

Контроллер (ScrollMagic.Controller) управляет всеми сценами на странице. Он необходим для корректного отслеживания прокрутки:

const controller = new ScrollMagic.Controller();

Контроллер может принимать дополнительные параметры, например, globalSceneOptions, которые задают настройки для всех сцен сразу:

const controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: 0.5, // Срабатывание по центру окна
    duration: '100%'  // Длительность действия сцены на весь экран
  }
});

Создание сцен для страниц

Каждый блок контента, который будет являться отдельной страницей при прокрутке, необходимо обернуть в сцену (ScrollMagic.Scene). Основные параметры сцены:

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

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

const scene = new ScrollMagic.Scene({
  triggerElement: '#page1',
  duration: '100%',
  triggerHook: 0
})
.setPin('#page1') // Закрепление блока на время сцены
.addTo(controller);

Метод .setPin() позволяет закрепить элемент на экране на протяжении всей сцены, создавая эффект «перелистывания страниц».

Анимации между страницами

Для плавного перехода между страницами можно использовать TweenMax или GSAP анимации. Связка с ScrollMagic выглядит так:

const tween = gsap.fromTo('#page2', 
  { opacity: 0, y: 50 }, 
  { opacity: 1, y: 0, duration: 1 }
);

const scene = new ScrollMagic.Scene({
  triggerElement: '#page2',
  triggerHook: 0.8,
  reverse: true
})
.setTween(tween)
.addTo(controller);

Ключевые моменты:

  • reverse: true позволяет проигрывать анимацию в обратную сторону при прокрутке вверх.
  • Использование координат y и opacity обеспечивает плавное появление блоков на экране.
  • triggerHook задает точку начала анимации относительно окна браузера.

Связка нескольких сцен для пагинации

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

const pages = document.querySelectorAll('.page');

pages.forEach((page, index) => {
  new ScrollMagic.Scene({
    triggerElement: page,
    duration: '100%',
    triggerHook: 0
  })
  .setPin(page)
  .addTo(controller);
});

Этот подход обеспечивает «эффект стопки страниц», когда каждая страница закрепляется на экране, а следующая плавно появляется при скролле.

Индикаторы и навигация

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

scene.on('enter', function () {
  document.querySelector('#indicator').textContent = `Страница ${index + 1}`;
});
scene.on('leave', function () {
  // Можно очищать индикатор или подготавливать следующую страницу
});

Использование динамических высот и адаптивной прокрутки

Если страницы имеют разную высоту, сцены можно задавать динамически:

pages.forEach(page => {
  const scene = new ScrollMagic.Scene({
    triggerElement: page,
    duration: page.offsetHeight
  })
  .setPin(page)
  .addTo(controller);
});

Это гарантирует корректное поведение пагинации на всех устройствах и при изменении размеров окна.

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

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

  • Использовать .setPin() только на видимых элементах.
  • Минимизировать сложные анимации и повторные пересчёты DOM.
  • Ограничивать количество одновременно активных сцен.

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

Оглавление