Оверлеи для видео

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

Настройка сцены для видео

Для начала необходимо создать контроллер ScrollMagic:

var controller = new ScrollMagic.Controller();

Далее формируется сцена, которая будет отслеживать позицию скролла относительно видео:

var scene = new ScrollMagic.Scene({
    triggerElement: "#video-section", // Элемент, где начинается эффект
    duration: 500,                    // Длительность эффекта в пикселях прокрутки
    triggerHook: 0.5                  // Положение триггера на экране (0 — верх, 1 — низ)
});

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

Создание оверлея поверх видео

Оверлей создается как обычный HTML-элемент:

<div id="video-overlay"></div>

CSS для оверлея:

#video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Полупрозрачный эффект */
    pointer-events: none; /* Чтобы клики проходили на видео */
    opacity: 0;
}

Анимация оверлея через TweenMax/GSAP

ScrollMagic тесно интегрируется с GSAP для анимации. Пример плавного появления оверлея:

var overlayTween = gsap.to("#video-overlay", {opacity: 1, duration: 1});

scene.setTween(overlayTween);
scene.addTo(controller);

Важно: использование gsap.to обеспечивает плавную анимацию. Можно комбинировать fromTo для сложных эффектов, например, изменения цвета или масштаба оверлея.

Связь оверлея с воспроизведением видео

Для интерактивного контроля видео по скроллу применяются события ScrollMagic:

scene.on("progress", function(event) {
    var video = document.querySelector("#myVideo");
    video.currentTime = video.duration * event.progress;
});

Здесь event.progress возвращает значение от 0 до 1, соответствующее позиции скролла в сцене. Это позволяет синхронизировать оверлей и видео, создавая эффект “скролл-таймлайна”.

Множественные оверлеи и сцены

Для сложных проектов можно использовать несколько оверлеев с разными сценами:

var overlays = document.querySelectorAll(".video-overlay");

overlays.forEach(function(overlay, index) {
    var tween = gsap.fromTo(overlay, {opacity: 0}, {opacity: 1, duration: 1});
    var scene = new ScrollMagic.Scene({
        triggerElement: overlay,
        duration: 300,
        triggerHook: 0.7
    }).setTween(tween).addTo(controller);
});

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

Использование классов для более сложных эффектов

Анимацию можно реализовать не только через GSAP, но и через добавление/удаление классов CSS:

scene.on("enter", function () {
    document.querySelector("#video-overlay").classList.add("active");
});

scene.on("leave", function () {
    document.querySelector("#video-overlay").classList.remove("active");
});

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

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

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

var videos = document.querySelectorAll("video");

videos.forEach(function(video, index) {
    var overlay = video.nextElementSibling;
    var tween = gsap.to(overlay, {opacity: 1, duration: 1});

    var scene = new ScrollMagic.Scene({
        triggerElement: video,
        duration: video.clientHeight,
        triggerHook: 0.5
    }).setTween(tween).addTo(controller);

    scene.on("progress", function(e){
        video.currentTime = video.duration * e.progress;
    });
});

Такой подход обеспечивает полную интерактивность: каждый оверлей реагирует на прокрутку конкретного видео, а пользователь видит плавное наложение и синхронизацию.

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

  • Использовать will-change: opacity для оверлеев, чтобы браузер оптимизировал рендер.
  • Минимизировать количество одновременно анимируемых оверлеев.
  • Для длинных видео лучше ограничивать duration сцен, чтобы не перегружать вычисления прогресса.
  • Использовать requestAnimationFrame при сложных вычислениях синхронизации видео с прокруткой, если GSAP не покрывает все нужды.

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

Оглавление