鼠标滚动时移动视频背景

Posted 2023-03-06

技术标签:

【中文标题】鼠标滚动时移动视频背景【英文标题】：Moving video background as mouse scrolls 【发布时间】：2013-11-04 10:39:15 【问题描述】：

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

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

这是主页：

http://www.katyperry.com/

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

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

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

垂直滚动移动视频滑块。

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

有什么想法吗？你以前做过/见过类似的事情吗？

提前致谢， Zsolt

【问题讨论】：

背景不是视频。这是一系列图像，随着scrollTop 的document 的增加而更新。它实际上是定格动画。 “背景”实际上是@ZsoltBalla 链接到的视频，而不是定格动画。您可以在此处查看与效果关联的 javascript 文件：d1qhhammy2egfp.cloudfront.net/wp-content/themes/katyperry-2/… 谢谢，两位！我真的很喜欢这种效果，也许有一天我会尝试一下...... 【参考方案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 会有效地增加/减少视频。