4

你看过凯蒂佩里的网站吗？太棒了（我是认真的，没有垃圾邮件）！

它有一个移动的背景视频，我不知道他们是如何实现它的。

这是主页：

http://www.katyperry.com/

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

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

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

垂直滚动移动视频滑块。

我似乎无法弄清楚他们是如何做到这一点的，这让我发疯（花了大量时间试图对其进行逆向工程）

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

提前致谢， Zsolt

4

1 回答 1

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

随着页面滚动，currentTime通过视频有效地增加/减少擦洗。

进一步阅读：链接

于 2013-10-25T11:00:58.343 回答