Scroll Trigger de Vídeo

Um efeito visual impressionante onde o vídeo é controlado pelo scroll da página. Perfeito para contar histórias de forma interativa.

Código para Elementor (Custom Code - Footer)

<script data-minify="1" src="https://gabrielrock.com.br/libs/jquery.js?ver=1759923554"></script>
<script data-minify="1" src="https://gabrielrock.com.br/libs/gsap.min.js?ver=1759923554"></script>
<script data-minify="1" src="https://gabrielrock.com.br/libs/ScrollTrigger.min.js?ver=1759923554"></script>

<script>
$( document ).ready(function() {
    console.clear();
    $('video').addClass('video-background');

    const video = document.querySelector(".video-background");
    let src = video.currentSrc || video.src;
    console.log(video, src);

    /* Make sure the video is 'activated' on iOS */
    function once(el, event, fn, opts) {
        var onceFn = function (e) {
            el.removeEventListener(event, onceFn);
            fn.apply(this, arguments);
        };
        el.addEventListener(event, onceFn, opts);
        return onceFn;
    }

    once(document.documentElement, "touchstart", function (e) {
        video.play();
        video.pause();
    });

    gsap.registerPlugin(ScrollTrigger);

    let tl = gsap.timeline({
        defaults: { duration: 1 },
        scrollTrigger: {
            trigger: "#container",
            start: "top top",
            end: "bottom bottom",
            scrub: true
        }
    });

    once(video, "loadedmetadata", () => {
        tl.fromTo(
            video,
            {
                currentTime: 0
            },
            {
                currentTime: video.duration || 1
            }
        );
    });

  

    setTimeout(function () {
        if (window["fetch"]) {
            fetch(src)
                .then((response) => response.blob())
                .then((response) => {
                    var blobURL = URL.createObjectURL(response);
                    var t = video.currentTime;
                    once(document.documentElement, "touchstart", function (e) {
                        video.play();
                        video.pause();
                    });
                    video.setAttribute("src", blobURL);
                    video.currentTime = t + 0.01;
                });
        }
    }, 1000);
});
</script>