Вращающиеся лучи с помощью анимации CSS3 и JavaScript

Сегодня у нас очень интересный эксперимент. Мы будем заниматься созданием вращающихся лучей вокруг картинки. Работать все это будет с использованием анимации CSS3 и JavaScript. Код довольно-таки простой, но эффект сможет поразить любого! Итак приступим.

[adsense]
Посмотреть демо   Скачать исходники

CSS

Нам потребуется совсем маленький код на CSS:

#rays  {
  background:url(rays.png) 0 0 no-repeat;
  position:absolute;
  top:0;
  left:0;
  width:490px;
  height:490px;
  -webkit-transform:scale(1) rotate(16.768rad);
  -moz-transform:scale(1) rotate(16.768rad);
}

Изображение с лучами мы сделаем фоновым изображением. Было бы очень неплохо жестко задать размеры элемента. Так же можно сразу установить значения для вращения.

JavaScript

Эффект вращения мы будем достигать за счет изменения CSS3 свойств. Нам также нужно учесть специфичность браузеров. Первым шагом будет определение браузера:

var cssPrefix = false;
switch(Browser.name) {
  case "safari":
    cssPrefix = "webkit";
    break;
  case "chrome":
    cssPrefix = "webkit";
    break;
  case "firefox":
    cssPrefix = "moz";
    break;
  case "opera":
    cssPrefix = "o";
    break;
  case "ie":
    cssPrefix = "ms";
    break;
}

В данном конкретном случае мы будем использовать библиотеку MooTools. jQuery и другие библиотеки так же имеют методы для определения браузера, так что выбор за вами. Как видно из кода, данный эффект будет поддерживаться в webkit браузерах (Chrome, Safari, webkit-mobile), Firefox и Opera. После того, как мы определили браузер, нам нужно определить функцию setInterval, задача которой периодически менять угол поворота изображения.
Вот так будет выглядеть код на JavaScript:

// Spin them rays!
if(cssPrefix) { // Skip IE!
  var rays = document.getElementById("rays"), degrees = 0, speed = 0.05;
  setInterval(function() {
    degrees += speed; // degree adjustment each interval
    rays.setAttribute("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
  },20);
}

А вот так код будет выглядеть с использованием библиотеки MooTools:

// Spin them rays!
if(cssPrefix) { // Skip IE!
  var rays = $("rays"), degrees = 0, speed = 0.05;
  (function() {
    degrees += speed; // degree adjustment each interval
    rays.set("style","-" + cssPrefix + "-transform:rotate(" + degrees + "deg)");
  }).periodical(20);
}

В этом примере мы использовали 20 интервалов миллисекунды, что создает плавное вращение. Дабы привлечь внимание пользователя к вращающимся лучам вы можете добавить немного разнообразия: при наведении курсора мыши на лучи — они будут вращаться быстрее. Для этого нужно дописать вот такой код:

rays.addEvents({
  mouseenter: function() { // 5x! Warp speed!
    speed = 0.25;
  },
  mouseleave: function() { // Back to normal;
    speed = 0.05;
  }
});

Оригинальная статья http://davidwalsh.name/javascript-spin

Посмотреть демо   Скачать исходники