Создание вращающихся лучей с помощью CSS3 анимации и JavaScript

Томас Фукс, создатель script2 (Scriptaculous «вторая итерация») и Zepto.js (мобильный JavaScript фреймворк), создает выдающиеся анимационные элементы на JavaScript. Он легенда по праву, и не зря. Его работа вдохновила веб-разработчиков во всем мире отказаться от Flash и сделать свой выбор в пользу JavaScript. Из его проектов нам понравились вращающиеся лучи.

Пример

---

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);
}

Лучи должны быть выполнены через background, потому что в CSS проще управлять размерами и  трансформацией изображений.

JavaScript

Вращающиеся лучи выполнены с помощью JavaScript и CSS3. Первый шаг — определить браузер:

var cssPrefix = "";
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 Browser object, но, в принципе, можно использовать и сторонние JS библиотеки. Как только браузер определен, устанавливаем setInterval переменную, используемую, как интервал периодического обновления вращаемого  элемента:

// 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 милисекунд, чтобы движение было плавным. Если хотите немного повеселится, то можно поиграть со скоростью. Например, если навести на элемент курсором мыши, то скорость вращения увеличится в 5 раз:

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

Также отметим, что Safari и Chrome справляются с анимацией лучше остальных браузеров.

---

Источник: davidwalsh.name

---