bre.adhttp://bre.ad后台如何工作？

问题描述

| Bre.ad具有这样的背景，它会不断移动，并且有面包师的卡车在路上行驶的幻想。我想知道这样做是如何做到的，以便图像垂直移动而不是水平移动？     

解决方法

        整个背景是这个长的png文件，城市景观和云朵是透明的背景png，它们以多个div分层放置在其上。 背景（镇）： CityScape： 页面源中的相关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\"},l.css({backgroundPosition:\"0 105px\"}).animate({backgroundPosition:p+\"px 105px\"},easing:\"linear\",complete:r})
}

    ,        使用多个div，每个div都有自己的背景。将它们堆叠起来会形成分层背景的错觉。这样，每一层都可以与其他层分开移动，从而产生错觉，即某些层比其他层更远。 JavaScript用于缓慢移动每个div元素的

background-position

属性。每一层的完成速度不同。     ,        这是通过对大图像的“ 5”进行动画处理而创建的。您可以通过设置

background-image

的垂直位置动画来切换到垂直移动。这样，您只一次显示部分图像。 您可以使用jQuery或类似的javascript库对该属性进行动画处理。