Создаем вращающиеся иконки с помощью CSS3 и Mootols

Have a question? Ask in chat with AI!

вращающиеся иконкиСегодня мы займемся тем, что попробуем приукрасить внешний вид иконок на профили (RSS, twitter и т.д.). Добавим немного движения в эти иконки. А делать мы будем это с помощью CSS3 анимации.Так же с помощью JavaScript библиотеки MooTools мы будем задавать произвольное расположение и поворот иконок. Давайте посмотрим как притворить это в жизнь.

Посмотреть демо

HTML

Применим стандартный, простой способ для создания иконок:

RSS лента @RusDigiOrg Твиттер Ma3oBblu на Facebook Ma3oBblu в Skype Ma3oBblu Email

С помощью CSS стилей сделаем иконки более приятными на вид.

CSS

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

#followIcons a  {
  display:inline-block;
  width:48px;
  height:48px;
  text-indent:-3000px;
  background-position:0 0;
  background-repeat:no-repeat;
  z-index:2000;
  overflow:hidden;
  position:absolute;
}

После того, как мы использовали конструкцию проверенную временем, настал черед новых свойств CSS3. Мы будем использовать свойство transition:

#followIcons a  {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}

Продолжительность эффекта transition установлена на 0.8 секунды. Вы можете поменять это время в большую или меньшую сторону как вам угодно. Применять эффект transition мы будем к свойству transform.

JavaScript с библиотекой MooTools

Первый шаг — это случайное позиционирование иконок внутри контейнера. Очень важно статически задать размеры контейнера. Затем вычесть ширину и высоту иконок из размеров контейнера и узнать размер той площади, в которой мы будем располагать иконки. Делаем мы это для того, чтобы все иконки были полностью видны. Следующий шаг — добавление событий mouseenter и mouseleave в течении которых иконки будут вертеться и блекнуть.

var $random = function(x) { return Math.random() * x; };
var availableWidth = 200, availableHeight = 40;

// получаем нужный префикс для css свойств
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;
}

// иконки
var icons = $$("#followIcons a");
var zIndex = 1000;

// каждая ссылка будет случайной
icons.each(function(element,index) {
  // случайный поворот
  var startDeg = $random(360);
  // установить иконку в нужном месте, с поворотом и прозрачностью
  var resetPlace = function() {
    element.fade(0.6).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
  };
  // случайное позиционирование элемента
  element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
  // поворот изображения
  resetPlace();
  // добавим события
  element.addEvents({
    mouseenter: function() {
      element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");
    },
    mouseleave: resetPlace
  });
});

Когда происходит событие mouseenter (наводится курсор мыши на иконку), угол поворота иконки изменяется до нуля градусов, т.е. мы увидим иконку без поворота. Когда курсор мыши отводится от иконки — она принимает случайное положение и угол поворота. Так же используется эффект transition для создания эффекта блеклости.

Посмотреть демо

Заключение

В итоге мы получили: вращающиеся, блекнущие, анимированные элементы. Что было до этого? Статичные, скучные, традиционные иконки. Используйте эти эффекты в собственных проектах и делитесь впечатлениями в комментариях.

Сейчас продвижение статьями набирает всё большую и большую популярность. А вот и интересная статья на эту тему: продвижение сайта статьями.


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

  1. Уведомление: Создаем вращающиеся иконки с помощью CSS3 и Mootols | Grabr

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

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

Предыдущая запись Промежуточные итоги или мысли вслух
Следующая запись Уникальные шрифты: Google Fonts