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

Анимация – это как раз тот отличный эффект, создание которого сильно упрощается за счет таких javascript-платформ как MooTools и jQuery. Сегодня мы хотим предложить вам отличное jQuery-руководство, в котором рассказывается о разработке анимированного фонового изображения на странице. Воспользуйтесь отрывком кода 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 для фона, чтобы наше шоу продолжалось. Последний этап заключается в, как вы уже догадались, в запуске всего представления!

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

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