554 Томас Фукс, создатель script2 (Scriptaculous «вторая итерация») и Zepto.js (мобильный JavaScript фреймворк), создает выдающиеся анимационные элементы на JavaScript. Он легенда по праву, и не зря.
Его работа вдохновила веб-разработчиков во всем мире отказаться от Flash и сделать свой выбор в пользу JavaScript. Из его проектов нам понравились вращающиеся лучи.
Позвольте вам показать, как Томас это сделал!
CSS
|
1 2 3 4 5 6 7 8 9 10 |
#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. Первый шаг — определить браузер:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 переменную, используемую, как интервал периодического обновления вращаемого элемента:
|
1 2 3 4 5 6 7 8 |
// Вращаем лучи! if(cssPrefix) { // Пропуск 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 это выглядит так:
|
1 2 3 4 5 6 7 8 |
// Вращаем лучи! if(cssPrefix) { // Пропуск 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 раз:
|
1 2 3 4 5 6 7 8 |
rays.addEvents({ mouseenter: function() { // 5x! Warp speed! speed = 0.25; }, mouseleave: function() { // Back to normal; speed = 0.05; } }); |
Также отметим, что Safari и Chrome справляются с анимацией лучше остальных браузеров.
