具有視頻的視差滾動效果

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 ）而不是圖像。 可能嗎？

Answer 1

您無法將背景圖像更改為CSS中的視頻，您需要使用zIndex欺騙瀏覽器（或使用gif文件而不是視頻）：

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

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

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