Навигация между разделами

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

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

Каждый раздел страницы может быть представлен как отдельная сцена (Scene). Сцена создаётся с помощью конструктора:

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1", // элемент, от которого начинается сцена
    duration: "100%",            // длина сцены (может быть в px или %)
    triggerHook: 0.5             // точка триггера: 0 - верх, 1 - низ, 0.5 - середина
})
.setClassToggle("#menu-item1", "active") // добавление класса к меню при достижении сцены
.addTo(controller);
  • triggerElement — HTML-элемент, начало сцены.
  • duration — протяжённость сцены; при значении "100%" сцена длится до конца видимой области.
  • triggerHook — положение триггера относительно окна браузера.

Использование setClassToggle позволяет подсвечивать пункт меню при скролле к соответствующему разделу, создавая эффект «активного» раздела.

Привязка анимаций к прокрутке

ScrollMagic интегрируется с библиотеками анимации, например, GSAP (GreenSock), для создания плавного движения элементов. Пример анимации текста при появлении раздела:

var tween = gsap.from("#section1 h2", {y: 50, opacity: 0, duration: 1});

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    triggerHook: 0.8,
    reverse: false
})
.setTween(tween)
.addTo(controller);
  • reverse: false — анимация проигрывается один раз при скролле вниз и не возвращается при прокрутке вверх.
  • triggerHook: 0.8 — сцена запускается чуть раньше появления элемента в видимой области.

Прокрутка к разделу по клику меню

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

controller.scrollTo(function(target) {
    gsap.to(window, {duration: 1, scrollTo: target});
});

document.querySelectorAll("nav a").forEach(anchor => {
    anchor.addEventListener("click", function(e) {
        e.preventDefault();
        var targetId = this.getAttribute("href");
        controller.scrollTo(targetId);
    });
});

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

  • При клике вычисляется целевой элемент через его id.
  • GSAP отвечает за плавную анимацию прокрутки.
  • ScrollMagic управляет синхронизацией сцен, что позволяет избежать конфликтов между скроллом пользователя и программной прокруткой.

Параллакс и фиксированные элементы

Для создания навигации с фиксированным меню или элементами параллакса используются сцены с методами:

.setPin("#menu") // фиксирует меню на время сцены

Пример фиксации меню:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1",
    duration: "300%"
})
.setPin("#menu")
.addTo(controller);
  • setPin удерживает элемент на экране на время сцены.
  • Длительность сцены определяет, сколько прокрутки меню остаётся фиксированным.

События сцены для расширенной навигации

ScrollMagic предоставляет события сцены, которые позволяют реагировать на скролл динамически:

scene.on("enter", function(event) {
    console.log("Раздел достигнут:", event.target.triggerElement());
});

scene.on("leave", function(event) {
    console.log("Раздел покинут:", event.target.triggerElement());
});

Это используется для:

  • динамического изменения меню;
  • запуска аналитики посещений разделов;
  • запуска дополнительных анимаций или звуков.

Советы по структуре разделов

  1. Каждый раздел должен иметь уникальный id для точной привязки сцен.
  2. Разделы желательно одинаковой высоты, чтобы прокрутка была предсказуемой.
  3. Если на странице много сцен, лучше использовать один контроллер ScrollMagic для всех.
  4. Продуманное расположение triggerHook позволяет запускать анимации до появления элемента в видимой области, создавая эффект «ожидания».

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

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

var sections = document.querySelectorAll("section");

sections.forEach((section, index) => {
    new ScrollMagic.Scene({
        triggerElement: section,
        triggerHook: 0.5
    })
    .setClassToggle(`#menu-item${index+1}`, "active")
    .addTo(controller);
});

Такое решение позволяет автоматически подсвечивать меню, независимо от количества разделов, без дублирования кода.

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

Оглавление