Moving video background as mouse scrolls

2 Views

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.

Read More

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

Post Views: 2

Related posts

Leave a Reply

1 comment 

  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