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

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


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

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

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

 



Запись опубликована в рубрике CSS3, JavaScript с метками , , , . Добавьте в закладки постоянную ссылку.

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

  1. Уведомление: Вращающиеся лучи с помощью анимации CSS3 и JavaScript | Grabr

  2. Уведомление: progg.ru

  3. Ark говорит:

    Страница с демо невалидна (из-за этого, Quirks mode)
    Надо пофиксить

    • Alexben73 говорит:

      Автор явно мудак, из-за него минут 30 потерял времени, что-б найти проблему.
      добавь валидный доктайп к своей странице с примерами!

      • Гилязетдинов Руслан говорит:

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

        • Tamer SEO говорит:

          приношу свои извинения через 1 год =)
          Лучше поздно, чем никогда.

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

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

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