Миникарта страницы

Миникарта страницы — это инструмент, позволяющий визуально отслеживать прогресс пользователя при прокрутке. В контексте библиотеки ScrollMagic она реализуется через сцены (Scenes) и контроллеры (Controllers), которые синхронизируют анимации с прокруткой страницы.

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

Для работы с ScrollMagic требуется создать контроллер:

var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 'onEnter',
        duration: '100%'
    }
});
  • triggerHook определяет момент активации сцены. Значения 'onEnter', 'onLeave' или числа от 0 до 1 задают положение триггера относительно окна.
  • duration задаёт продолжительность сцены в пикселях или процентах от высоты элемента.

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

Создание миникарты

Миникарта реализуется как вертикальный индикатор прогресса. Для её работы необходимо:

  1. Создать HTML-структуру:
<div id="minimap">
    <div id="progress"></div>
</div>
  1. Задать стили:
#minimap {
    position: fixed;
    top: 0;
    right: 10px;
    width: 5px;
    height: 100%;
    background: rgba(0,0,0,0.1);
}

#progress {
    width: 100%;
    height: 0;
    background: #3498db;
}
  • #minimap — контейнер всей миникарты.
  • #progress — элемент, высота которого изменяется в зависимости от прокрутки.

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

Для динамического обновления прогресса создаётся сцена:

var scene = new ScrollMagic.Scene({
    triggerElement: "body",
    duration: document.body.scrollHeight - window.innerHeight
})
.on("progress", function(e) {
    var progressHeight = e.progress * 100;
    document.getElementById("progress").style.height = progressHeight + "%";
})
.addTo(controller);
  • triggerElement — элемент, с которого начинается отслеживание прокрутки.
  • duration сцены равен общей высоте страницы за вычетом высоты окна, чтобы прогресс доходил до 100%.
  • e.progress — значение от 0 до 1, отображающее текущий процент прокрутки сцены.

Продвинутые возможности

Синхронизация с секциями страницы

Если страница разделена на секции, можно создать отдельные сцены для каждой секции, чтобы миникарта отражала их завершение:

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

sections.forEach(function(section, index) {
    new ScrollMagic.Scene({
        triggerElement: section,
        duration: section.offsetHeight
    })
    .on("progress", function(e) {
        var progressHeight = ((index + e.progress) / sections.length) * 100;
        document.getElementById("progress").style.height = progressHeight + "%";
    })
    .addTo(controller);
});
  • Этот метод позволяет миникарте отображать прогресс по секциям с плавным увеличением.

Анимация цвета прогресса

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

scene.on("progress", function(e) {
    var progress = e.progress;
    var color = `rgb(${Math.floor(progress*255)}, 50, 200)`;
    document.getElementById("progress").style.backgroundColor = color;
});
  • Использование прогресс-значения для динамического изменения RGB-цвета делает миникарту интерактивной.

Использование Pin для фиксирования миникарты

Чтобы миникарта оставалась на месте при прокрутке:

new ScrollMagic.Scene({
    triggerElement: "#minimap",
    triggerHook: 0,
    duration: document.body.scrollHeight
})
.setPin("#minimap")
.addTo(controller);
  • setPin() фиксирует элемент на экране до завершения сцены.

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

  • Ограничение количества сцен уменьшает нагрузку на браузер.
  • Для длинных страниц рекомендуется использовать requestAnimationFrame внутри обработчика progress для плавной анимации.
  • Миникарта с прозрачностью и небольшими размерами потребляет меньше ресурсов.

Интерактивность

Можно добавить к миникарте кликабельные зоны для навигации:

document.querySelectorAll("#minimap div").forEach(function(marker, index){
    marker.addEventListener("click", function(){
        window.scrollTo({
            top: sections[index].offsetTop,
            beh * avior: "smooth"
        });
    });
});
  • Каждая зона соответствует секции, и клик по ней плавно прокручивает страницу.

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

Оглавление