视差滚动效果与视频

Question

我正在学习视差效果，并尝试在背景中显示视频而不是图像。

因此，我使用了背景图片创建了一个很好的效果。

这是我的 jQuery 代码：

$('[data-parallax]').each(function(){
  var $this = $(this),
      $window = $(window);

  $window.scroll(function() {
    var y = -($window.scrollTop() / $this.data('speed')),
        background = '50% '+ y + 'px';

    $this.css('background-position', background);
  }); 
});

我的CSS：

[data-parallax] {
  background-attachment: fixed;
  background-color: #fff;
  background-image: url('http://lorempixel.com/720/480');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
  position: relative;
}

示例: http://jsfiddle.net/7a2ky/show/
代码: http://jsfiddle.net/7a2ky/

我想用视频 (http://goo.gl/HcH2cL) 来实现相同的效果。这可行吗？

- Caio Tarifa

---

你尝试过使用嵌入式链接来播放你的视频吗？ - Nevin Madhukar K

@NevinMadhukarK 是的，我尝试使用HTML5 video元素来“模拟”背景。但是没有成功。 - Caio Tarifa

我不确定你是否理解我的意思。 嵌入式链接看起来像这样：<iframe width="560" height="315" src="//www.youtube.com/embed/BIz02qY5BRA" frameborder="0" allowfullscreen></iframe> - Nevin Madhukar K

http://syddev.com/jquery.videoBG/ 不知道这是否有帮助... 也请查看一下。 - Nevin Madhukar K

@NevinMadhukarK 感谢您提供这些技巧，但不幸的是我仍然不知道如何将此插件与视差滚动效果结合使用。 - Caio Tarifa

Answer 1

你不能在CSS中将背景图片变成视频，需要使用zIndex来欺骗浏览器（或者使用gif文件代替视频）：

$video.css({"height":"100%",
            position:'absolute',
            top:0,left:0,zIndex:10
           });

http://jsfiddle.net/camus/7a2ky/9/show/

- mpm

---

好的，它可以工作了，视频在后台就像你想要的那样。我没有触碰你的视差效果，因为它在我的电脑上无法工作。 - mpm

我不明白为什么视差效果在你的电脑上无法工作。但是感谢你的帮助，不幸的是这远远不是我所需要的。 - Caio Tarifa

Answer 2

JS

$(window).scroll(function ()
{
 var yPos=-($(window).scrollTop() / 6);
 if($(window).scrollTop()>100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
 }
 if($(window).scrollTop()<100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
 }
});

CSS

#div1_wrapper
{
  background:url("images/parallax1.jpg") no-repeat;
  background-attachment:fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width:100%;
}
#div2_wrapper
{
  background:url("images/parallax2.jpg") no-repeat;
  background-attachment:fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width:100%;
}

如果您需要查看完整的教程和演示，请访问http://talkerscode.com/webtricks/simple-parallax-effect-on-scrolling-using-jquery-and-css.php

- aman