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

Question

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

Answer 1

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

Фон (город):

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
    }

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

Answer 3

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

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