【问题标题】: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

【问题讨论】:

  • 背景不是视频。这是一系列图像,随着scrollTopdocument 的增加而更新。它实际上是定格动画。
  • “背景”实际上是@ZsoltBalla 链接到的视频,而不是定格动画。您可以在此处查看与效果关联的 JavaScript 文件:d1qhhammy2egfp.cloudfront.net/wp-content/themes/katyperry-2/…
  • 谢谢,两位!我真的很喜欢这种效果,也许有一天我会尝试一下......

标签: jquery css wordpress video background


【解决方案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

【讨论】:

  • 我很想看看这个,这个周末可能会尝试做一个。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-09-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多