Question

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

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

这是主页：

http://www.katyperry.com/

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

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

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

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

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

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

提前致谢，泽索特

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

移动视频背景鼠标滚动

1 个答案: