移动视频背景作为鼠标滚动 [英] Moving video background as mouse scrolls

问题描述

你看过Katy Perry的网站吗？这是真棒（我很认真，没有垃圾邮件）！

它有一个移动的背景视频，我不知道他们实现它的方式。 >

这是主页：

http://www.katyperry.com/

，当您开始向下滚动时，背景图片（实际上是视频）开始播放。

我设法想出这是视频本身，

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

，垂直滚动会移动视频滑块。

我似乎不知道他们是怎么做的，它驱使我疯了（花了大量的时间试图逆向工程）。

任何想法？

提前感谢，
Zsolt

解决方案

  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

进一步阅读： LINK

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

解决方案

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

这篇关于移动视频背景作为鼠标滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！