Moving video background as mouse scrolls

问题:

have you seen Katy Perry's website? It's awesome (I'm serious, no spamming)!

It has a moving background video, and I can't figure out the way they implemented it.

this is the homepage:

http://www.katyperry.com/

and as you start to scroll down, the background image (in fact, video) starts playing.

What I managed to figure out that this is the video itself,

http://www.katyperry.com/wp-content/themes/katyperry-2/library/video/KATY_BG_21.mp4

and the vertical scrolling moves the video slider.

I just can't seem to figure out how they do that, and it's driving me mad (spent a substantial amount of time trying to reverse engineer it)

any ideas? have you done/seen anything like that before?

Thanks in advance, Zsolt

回答1:

function updateVideo() {
        var video = $('#video-bg').get(0);
        var videoLength = video.duration;
        var scrollPosition = $(document).scrollTop();
        video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;//(scrollPosition / SCROLL_SCRUB_SPEED) % videoLength;
}

$(window).scroll(function(e) {
        if(videoReady && continueUpdatingVideo) { updateVideo(); }
    });

As the page is scrolled, currentTime is increased / decreased effectively scrubbing through the video.

Further reading: LINK