Moving a video background as a mouse scroll

Question

Have you seen Katy Perry's site? This is awesome (I'm serious, not spam)!

He has a moving background video, and I can’t understand how they implemented it.

this is the homepage:

http://www.katyperry.com/

and when you start scrolling down, playback of the background image (essentially a video) will begin.

What I managed to find out is this video,

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

and vertical scrolling moves the video slider.

I just can’t understand how they do it, and it drives me crazy (I spent a considerable amount of time redesigning it).

any ideas? Have you done / seen something like this before?

Thanks in advance, Zholt

Answer 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(); }
    });

, currentTime /, .

: