How does the bre.ad (http://bre.ad) background work?

Question

Bre.ad has this background where it keeps moving and there is an illusion of a baker's truck moving on the road. I was wondering how that was done and can it be done so that the image is moving vertically instead of horizontally?

Answer 1

The entire background is this long png file, and the city scapes and clouds are transparent background pngs that are layered over it in multiple divs.

Background (Town):

CityScape:

The relevant HTML from the page source:

<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>

and the relevant CSS from 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
    }

and similarly for the other divs. The repeat-x property is used to repeat the background so as to mimic the effect of continuous scrolling. Also, the left end of the image and the right end line up, so as to give a smooth transition.

The animation is done by homepage.js which slowly shifts the background-position linearly. The relevant lines are:

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})
}