Плавная прокрутка к якорям

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>

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

const controller = new ScrollMagic.Controller();

Контроллер является центральным объектом, через который сцены регистрируются и синхронизируются с прокруткой страницы.

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

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

Пример создания сцены:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();

        const target = document.querySelector(this.getAttribute('href'));

        gsap.to(window, {
            duration: 1.2,
            scrollTo: { y: target, offsetY: 70 },
            ease: "power2.out"
        });
    });
});

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

  • duration — длительность анимации прокрутки в секундах.
  • scrollTo — объект с координатами, куда будет производиться прокрутка.
  • offsetY — смещение относительно верхней границы страницы, полезно для фиксированных шапок.
  • ease — тип easing-функции для плавности движения.

Использование GSAP здесь обеспечивает более плавное движение, чем стандартный scrollIntoView.

Использование ScrollMagic для анимации при прокрутке

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

const scene = new ScrollMagic.Scene({
    triggerElement: "#section1", 
    duration: 0, // нулевая длительность, срабатывает в точке триггера
    triggerHook: 0.1 // положение триггера в окне, 0 — верх, 1 — низ
})
.setTween(gsap.from("#section1 h2", { y: 50, opacity: 0, duration: 0.8 }))
.addTo(controller);

Разбор параметров:

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

Такой подход позволяет одновременно управлять прокруткой и запуском анимаций, создавая комплексный эффект «плавной навигации».

Сопряжение якорей с прокруткой ScrollMagic

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

document.querySelectorAll("section").forEach((section, index) => {
    new ScrollMagic.Scene({
        triggerElement: section,
        triggerHook: 0.2,
    })
    .on("enter", () => {
        document.querySelectorAll("nav a").forEach(link => link.classList.remove("active"));
        document.querySelector(`nav a[href="#${section.id}"]`).classList.add("active");
    })
    .addTo(controller);
});

Особенности реализации:

  • Событие enter срабатывает, когда верхняя граница секции достигает triggerHook.
  • Активный класс на ссылках позволяет визуально выделять текущий раздел.
  • Этот метод масштабируем для страниц с большим количеством блоков.

Оптимизация плавной прокрутки

Для улучшения пользовательского опыта важно учитывать:

  1. Смещение фиксированных элементов: если шапка фиксирована, необходимо корректировать offsetY в GSAP или CSS.
  2. Длительность анимации: не делать слишком короткой, иначе прокрутка будет резкой, и не слишком длинной, чтобы не задерживать пользователя.
  3. Throttle событий: при большом количестве сцен можно ограничивать обработку события прокрутки для повышения производительности.
const throttle = (fn, wait) => {
    let time = Date.now();
    return function() {
        if ((time + wait - Date.now()) < 0) {
            fn();
            time = Date.now();
        }
    }
};
window.addEventListener("scroll", throttle(() => controller.update(), 50));

Интеграция с адаптивным дизайном

При изменении размеров экрана позиции элементов и якорей могут смещаться. Необходимо обновлять ScrollMagic-сцены:

window.addEventListener("resize", () => {
    controller.update(true); // пересчитывает все сцены
});

Это гарантирует, что плавная прокрутка и анимации останутся корректными на всех устройствах.

Дополнительные возможности

  • Pinning — закрепление элементов при прокрутке:
new ScrollMagic.Scene({
    triggerElement: "#header",
    duration: 300
})
.setPin("#header")
.addTo(controller);
  • Offset сцены — позволяет сдвигать начало анимации относительно триггера.
  • Callbacks — использование событий enter, leave, progress для запуска дополнительных эффектов.

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

Оглавление