移动视频背景鼠标滚动

Question

你看过Katy Perry的网站吗？这很棒(我很认真,没有垃圾邮件)!

它有一个移动的背景视频,我无法弄清楚他们实现它的方式.

这是主页:

http://www.katyperry.com/

当你开始向下滚动时,背景图像(实际上是视频)开始播放.

我设法弄清楚这是视频本身,

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

并且垂直滚动会移动视频滑块.

我似乎无法弄清楚他们是如何做到这一点的,这让我很生气(花了很多时间试图对其进行逆向工程)

有任何想法吗？你以前做过/看过这样的事吗？

提前谢谢,Zsolt

Answer 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(); }
    });

当页面滚动时,currentTime通过视频有效地擦除/增加/减少页面.

进一步阅读:LINK