Заливка и обводка

Библиотека ScrollMagic предназначена для создания анимаций и интерактивного поведения элементов при прокрутке страницы. Работа с заливкой и обводкой элементов в сочетании с ScrollMagic требует понимания взаимодействия CSS-свойств, анимационных библиотек (например, GSAP) и структуры сцен.

Создание сцены для анимации стилей

Ключевой элемент ScrollMagic — сцена (Scene), которая определяет, в какой момент и каким образом активируются изменения стилей. Сцена связывается с элементом через селектор и может использоваться для анимации заливки (background-color) или обводки (border).

Пример создания сцены для изменения цвета фона:

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
    triggerElement: "#box", 
    duration: 300,         
    triggerHook: 0.5       
})
.setTween("#box", { backgroundColor: "#3498db", ease: "linear" })
.addTo(controller);

Разбор ключевых параметров:

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

Анимация обводки

Обводка элементов (border) в CSS имеет несколько характеристик, которые можно анимировать: цвет, ширину, стиль и радиус. Наиболее практично изменять цвет и толщину, поскольку другие свойства могут быть не поддержаны при плавной анимации.

gsap.to("#box", {
    borderColor: "#e74c3c",
    borderWidth: "5px",
    duration: 1
});

const borderScene = new ScrollMagic.Scene({
    triggerElement: "#box",
    duration: 400
})
.setTween("#box", { borderColor: "#e74c3c", borderWidth: "5px", ease: "linear" })
.addTo(controller);

Совет: для плавного изменения ширины и цвета одновременно лучше использовать библиотеку GSAP, так как чистый CSS через ScrollMagic ограничен.

Комбинирование заливки и обводки

Можно одновременно анимировать несколько свойств, создавая комплексный эффект:

const combinedScene = new ScrollMagic.Scene({
    triggerElement: "#box",
    duration: 500
})
.setTween(
    gsap.to("#box", {
        backgroundColor: "#2ecc71",
        borderColor: "#27ae60",
        borderWidth: "6px",
        duration: 1
    })
)
.addTo(controller);

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

Контроль анимации с помощью событий

ScrollMagic предоставляет методы для слежения за состоянием сцены:

  • on("enter", callback) — выполняется при входе триггерного элемента в область видимости.
  • on("leave", callback) — срабатывает при выходе.
  • on("progress", callback) — отслеживает прогресс анимации в диапазоне от 0 до 1.

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

const progressScene = new ScrollMagic.Scene({
    triggerElement: "#box",
    duration: 400
})
.addTo(controller);

progressScene.on("progress", function(event) {
    const progress = event.progress;
    const red = Math.round(255 * progress);
    const green = Math.round(200 * (1 - progress));
    document.querySelector("#box").style.borderColor = `rgb(${red}, ${green}, 100)`;
});

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

Для более сложной заливки можно использовать градиенты и прозрачность (opacity):

gsap.to("#box", {
    background: "linear-gradient(45deg, #f39c12, #e74c3c)",
    opacity: 0.8,
    duration: 1
});

ScrollMagic позволяет привязать это к прокрутке точно так же, как с простыми цветами. Использование градиентов требует применения GSAP, так как CSS-анимация градиента напрямую ограничена.

Совместимость с SVG

Для SVG элементов заливка (fill) и обводка (stroke) анимируются аналогично:

gsap.to("#svgShape", {
    fill: "#9b59b6",
    stroke: "#8e44ad",
    strokeWidth: 4,
    duration: 1
});

const svgScene = new ScrollMagic.Scene({
    triggerElement: "#svgContainer",
    duration: 300
})
.setTween("#svgShape", {
    fill: "#9b59b6",
    stroke: "#8e44ad",
    strokeWidth: 4,
    ease: "linear"
})
.addTo(controller);

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

Практические рекомендации

  • Для плавных переходов всегда использовать GSAP.
  • Следить за производительностью: слишком длинные сцены с большим количеством анимируемых свойств могут снизить FPS.
  • При работе с SVG выбирать stroke и fill вместо border и background.
  • Использовать события progress, чтобы управлять сложными эффектами, которые нельзя просто задать через .setTween.
  • Для комплексных эффектов комбинировать несколько сцен, каждая из которых контролирует отдельное свойство.

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

Оглавление