Сегодня мы займемся тем, что попробуем приукрасить внешний вид иконок на профили (RSS, twitter и т.д.). Добавим немного движения в эти иконки. А делать мы будем это с помощью CSS3 анимации.Так же с помощью JavaScript библиотеки MooTools мы будем задавать произвольное расположение и поворот иконок. Давайте посмотрим как притворить это в жизнь.
Посмотреть демо
HTML
Применим стандартный, простой способ для создания иконок:
С помощью 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
для создания эффекта блеклости.
Посмотреть демо
Заключение
В итоге мы получили: вращающиеся, блекнущие, анимированные элементы. Что было до этого? Статичные, скучные, традиционные иконки. Используйте эти эффекты в собственных проектах и делитесь впечатлениями в комментариях.
Сейчас продвижение статьями набирает всё большую и большую популярность. А вот и интересная статья на эту тему: продвижение сайта статьями.
Не работает…!!! Как что и куда писать????