
CSS-код
#animate-area {
background-image: url(clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;
}
Первый этап заключается в установке изображения в качестве фона нашего конкретного контейнера. Не забудьте сделать так, чтобы фон повторялся в горизонтальном направлении!
javascript-код MooTools
window.addEvent("domready",function() {
//settings
var duration = 40000;
var length = 2000;
var count = 0;
var tweener;
// Executes the standard tween on the background position
var run = function() {
tweener.tween("background-position", "-" + (++count * length) + "px 0px");
};
// Defines the tween
tweener = $("animate-area").setStyle("background-position", "0px 0px").set("tween", {
duration: duration,
transition: Fx.Transitions.linear,
onComplete: run,
link: "cancel"
});
// Starts the initial run of the transition
run();
});
Первый этап, как всегда, заключается в приготовлении настроек для отображения. Следующий заключается в настройке функции анимации. Мы увеличиваем отрицательный параметр left для фона, чтобы наше шоу продолжалось. Последний этап заключается в, как вы уже догадались, в запуске всего представления!
Посмотреть демо
Убедитесь, что скорость анимации очень низкая, и что она протекает плавно – большая скорость фона может свести с ума ваших пользователей. С другой стороны, если творчески подойти к этому, то ваш сайт будет уникальным!