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

Have a question? Ask in chat with AI!

вращающиеся лучиСегодня у нас очень интересный эксперимент. Мы будем заниматься созданием вращающихся лучей вокруг картинки. Работать все это будет с использованием анимации 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

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

 


7 комментариев для “0

  1. Уведомление: Вращающиеся лучи с помощью анимации CSS3 и JavaScript | Grabr
  2. Уведомление: progg.ru
    1. Автор явно мудак, из-за него минут 30 потерял времени, что-б найти проблему.
      добавь валидный доктайп к своей странице с примерами!

      1. можно было обойтись и без оскорблений) поправил, просто времени на все не хватает)

  3. Уведомление: Промежуточные итоги или мысли вслух | RusDigi.org Блог Гилязетдинова Руслана

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Мини-курс по jQuery для дизайнеров. Урок 5. Подсказки и списки
Следующая запись CSS3 для начинающих. Часть 5.2. Боксы на CSS3