Якорная навигация

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

Ключевая идея: каждая секция страницы выступает в роли «якоря», и при достижении этого якоря активируются соответствующие анимации или меняется состояние меню. Для реализации этого используются сцены (Scene) и контроллеры (Controller).

Создание контроллера ScrollMagic

Контроллер является центральным элементом библиотеки, который отслеживает скролл и управляет всеми сценами.

var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 0.5, // Положение триггера на экране (0 — верх, 1 — низ)
        duration: '100%'  // Длина сцены, можно указать пиксели или процент высоты окна
    }
});

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

  • triggerHook определяет, где на экране срабатывает событие.
  • duration задаёт длину сцены, что позволяет создавать плавные эффекты при скролле.
  • globalSceneOptions упрощает настройку одинаковых параметров для нескольких сцен.

Определение якорей и привязка сцен

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

var scene = new ScrollMagic.Scene({
    triggerElement: "#section1" // ID или класс якорного блока
})
.setClassToggle("#nav-link1", "active") // Добавление класса активного состояния
.addTo(controller); // Подключение сцены к контроллеру

Пояснения:

  • triggerElement — элемент DOM, при достижении которого срабатывает сцена.
  • setClassToggle — метод для изменения классов элементов меню при достижении якоря.
  • addTo(controller) подключает сцену к контроллеру, делая её активной.

Настройка длительности и динамическое обновление

Для плавной навигации часто требуется, чтобы активный класс оставался до следующего якоря. Это достигается за счёт указания duration в сцене:

var scene = new ScrollMagic.Scene({
    triggerElement: "#section2",
    duration: document.querySelector("#section2").offsetHeight
})
.setClassToggle("#nav-link2", "active")
.addTo(controller);

Особенности:

  • Длительность сцены равна высоте секции, что обеспечивает точное совпадение активного состояния меню с видимой областью контента.
  • При динамическом изменении размеров окна необходимо обновлять сцены:
window.addEventListener('resize', function() {
    controller.update(true);
});

Связывание якорей с плавной прокруткой

Чтобы при клике на элемент меню происходила анимация скролла к соответствующей секции, используется метод scrollTo контроллера:

controller.scrollTo(function(target) {
    TweenMax.to(window, 1, {
        scrollTo: {y: target, offsetY: 50} // offsetY — дополнительное смещение
    });
});

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

Пояснения:

  • Использование TweenMax (или GSAP) обеспечивает плавную анимацию прокрутки.
  • offsetY позволяет компенсировать фиксированные шапки или дополнительные отступы.
  • scrollTo интегрируется с якорными сценами, сохраняя синхронизацию активного состояния меню.

Гибкая работа с несколькими якорями

Для страниц с большим количеством секций рекомендуется использовать цикл для создания сцен динамически:

document.querySelectorAll(".section").forEach((section, index) => {
    new ScrollMagic.Scene({
        triggerElement: section,
        duration: section.offsetHeight
    })
    .setClassToggle(`#nav-link${index+1}`, "active")
    .addTo(controller);
});

Преимущества подхода:

  • Легко масштабируется при добавлении новых секций.
  • Исключается дублирование кода.
  • Сцены автоматически привязываются к размеру и положению соответствующих элементов.

Работа с прокруткой вверх и вниз

ScrollMagic автоматически определяет направление скролла. В сочетании с методами on("enter") и on("leave") можно создавать сложные эффекты:

scene.on("enter", function() {
    console.log("Секция активна");
});
scene.on("leave", function() {
    console.log("Секция не активна");
});

Особенности:

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

Синхронизация с анимациями

Якорная навигация часто комбинируется с анимациями контента. Для этого сцены ScrollMagic интегрируются с библиотекой GSAP:

var tween = TweenMax.from("#section3-content", 1, {opacity: 0, y: 50});

var scene = new ScrollMagic.Scene({
    triggerElement: "#section3",
    triggerHook: 0.7
})
.setTween(tween)
.addTo(controller);

Пояснения:

  • setTween связывает анимацию с позицией прокрутки.
  • Использование triggerHook позволяет контролировать момент начала анимации относительно видимой области.
  • Комбинация якорной навигации и анимаций улучшает восприятие структуры страницы пользователем.

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

Оглавление