bre.ad（http://bre.ad）背景如何工作？

Question

Bre.ad有这样的背景，它一直在移动，并且有一个面包师的卡车在路上移动的错觉。我想知道它是如何完成的，可以这样做，使图像垂直移动而不是水平移动？

Answer 1

整个背景是这个长png文件，城市景观和云是透明的背景png，在多个div中分层。

背景（镇）：

城市景观：

来自页面来源的相关HTML：

<div id="bread-world">
    <div id="puffyclouds" style="background-position: 0 -75px"></div>
    <div id="cityscape" style="background-position: 0 105px;"></div>
    <div id="ocean"></div>
    <div id="town" style="background-position: 0 0;"></div>
    <div id="truck"></div>
</div>

以及来自all.css的相关CSS

#town{
    background:url('//bread-images.s3.amazonaws.com/invite/town.png?1308363721') 
    repeat-x 542px 0px;
    width:5806px;
    left:0;
    bottom:0;
    height:599px;
    position:absolute
    }

和其他div类似。 repeat-x属性用于重复背景，以模仿连续滚动的效果。此外，图像的左端和右端对齐，以便平滑过渡。

动画由homepage.js完成，线性地慢慢移动background-position。相关的行是：

function r(){
    m.css({backgroundPosition:"0 -75px"}).animate({backgroundPosition:q+"px -75px"},{duration:n,easing:"linear"}),
    k.css({backgroundPosition:"0 0"}).animate({backgroundPosition:o+"px 0"},{duration:n,easing:"linear"}),
    l.css({backgroundPosition:"0 105px"}).animate({backgroundPosition:p+"px 105px"},{duration:n,easing:"linear",complete:r})
}

Answer 2

使用多个div，每个div都有自己的背景。将它们堆叠起来形成了分层背景的错觉。这样，每一层都可以与其他层分开移动，从而产生一些比其他层更远的错觉。 JavaScript用于缓慢移动每个div元素的background-position属性。对于每一层，完成此操作的速度是不同的。

Answer 3

这是通过为大图像的background-position设置动画来创建的。您可以通过设置background-image的垂直位置的动画来切换到垂直移动。这样，您只能一次显示部分图像。

您可以使用jQuery或类似的javascript库为此属性设置动画。