Moving video background as mouse scrolls

10,980
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

Share:
10,980

Related videos on Youtube

Zsolt Balla
Author by

Zsolt Balla

Updated on May 25, 2022

Comments

  • Zsolt Balla
    Zsolt Balla almost 2 years

    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

    • Rory McCrossan
      Rory McCrossan over 10 years
      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.
    • jsea
      jsea over 10 years
      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: d1qhhammy2egfp.cloudfront.net/wp-content/themes/katyperry-2/‌​…
    • Zsolt Balla
      Zsolt Balla over 10 years
      Thanks, both! I really love this effect, maybe I'll try it someday...
  • metaColin
    metaColin about 9 years
    I'd love to see a fiddle of this, may try to make one this weekend.