Главная > Анимация > Анимированный фон, реализованный при помощи MooTools

Анимированный фон, реализованный при помощи MooTools


25 мая 2012, 12:10. Разместил: Design FactoRy
Анимация – это как раз тот отличный эффект, создание которого сильно упрощается за счет таких javascript-платформ как MooTools и jQuery. Сегодня мы хотим предложить вам отличное jQuery-руководство, в котором рассказывается о разработке анимированного фонового изображения на странице. Воспользуйтесь отрывком кода MooTools, который также продемонстрирует вам процесс интеграции данного эффекта в любую веб-страницу.

Анимированный фон, реализованный при помощи MooTools

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 для фона, чтобы наше шоу продолжалось. Последний этап заключается в, как вы уже догадались, в запуске всего представления!

Посмотреть демо

Убедитесь, что скорость анимации очень низкая, и что она протекает плавно – большая скорость фона может свести с ума ваших пользователей. С другой стороны, если творчески подойти к этому, то ваш сайт будет уникальным!
Вернуться назад