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>

以及来自的相关CSS all.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})
}