html - 向下滚动页面时移动的背景图像

Question

我经常看到带有背景图片的网站，当您向下滚动时，背景图片会微妙地移动。这是一个非常好的效果，但我不确定该怎么做？我对 html、css 和 jquery 很有经验，但这是我以前从未做过的事情!

下面有一个简单的 jsfiddle，但我需要一些帮助!

非常感谢，

http://jsfiddle.net/def2y2yt/

代码片段 - 使用 jsfiddle 链接可获得更多内容

.background {
    background-image: url(example.pjg);
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
}

Answer 1

正如 TylerH 所说，它叫做 Parallax。你可以看一个例子 here.

使用 JavaScript:

var velocity = 0.5;

function update(){ 
var pos = $(window).scrollTop(); 
$('.container').each(function() { 
    var $element = $(this);
    // subtract some from the height b/c of the padding
    var height = $element.height()-18;
    $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) +  'px'); 
   }); 
   };

 $(window).bind('scroll', update);