Moving video background as mouse scrolls
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
Related videos on Youtube
Zsolt Balla
Updated on May 25, 2022Comments
-
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:
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 over 10 yearsThe background is not a video. It's a series of images which get updated as the
scrollTop
of thedocument
increases. It's effectively stop-frame animation. -
jsea over 10 yearsThe "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 over 10 yearsThanks, both! I really love this effect, maybe I'll try it someday...
-
-
metaColin about 9 yearsI'd love to see a fiddle of this, may try to make one this weekend.