Как работает bre.ad(http://bre.ad)?

Bre.ad имеет этот фон, где он продолжает двигаться, и есть иллюзия пекаря, движущегося по дороге. Мне было интересно, как это было сделано, и можно ли это сделать так, чтобы изображение двигалось вертикально, а не горизонтально?

Ответы

Ответ 1

Весь фон - это длинный png файл, а городские scapes и облака - прозрачные фоновые png, которые накладываются над ним в нескольких div.

Фон (город):

Background

CityScape:

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>

и соответствующий 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})
}

Ответ 2

Используется несколько div, причем каждый div имеет свой собственный фон. Сложение их создает иллюзию многоуровневого фона. Таким образом, каждый слой может двигаться отдельно от других, создавая иллюзию, что некоторые из них находятся дальше, чем другие. JavaScript используется для медленного изменения свойства background-position каждого элемента div. Скорость, с которой это выполняется, различна для каждого слоя.

Ответ 3

Это было создано путем анимации background-position большого изображения. Вы можете переключиться на вертикальное перемещение, оживив вертикальное положение background-image. Таким образом вы сразу показываете часть изображения.

Вы можете использовать jQuery или аналогичную библиотеку javascript для анимации этого свойства.