4

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

Zsolt Balla
  • 533
  • 2
  • 7
  • 16
  • 1
    The background is not a video. It's a series of images which get updated as the `scrollTop` of the `document` increases. It's effectively stop-frame animation. – Rory McCrossan Oct 25 '13 at 10:47
  • 1
    The "background" is actually the video @ZsoltBalla links to rather than a stop-frame animation. You can see the JavaScript file associated with the effect here: http://d1qhhammy2egfp.cloudfront.net/wp-content/themes/katyperry-2/library/js/home.js?ver=1.1 – jsea Oct 25 '13 at 11:01
  • Thanks, both! I really love this effect, maybe I'll try it someday... – Zsolt Balla Oct 25 '13 at 11:31

1 Answers1

12
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

Turnip
  • 35,836
  • 15
  • 89
  • 111