421 Идея с таким способом отображения иконок была взята с сайта Pubwich. Общий дизайн сайта выглядит довольно хорошо, но часть сайта, где расположены социальные иконки, заслужила особого внимания. Когда вы наводите мышкой на иконку, появляется подсказка с именем социалки, а все остальные иконки становятся полупрозрачными.
Немного доработав концепт с помощью CSS3 переходов, мы сделали плавного затемнения и осветления элементов и анимации появления подсказки. Все это получило название «красивый способ отображения социальных иконок на CSS3».
Пример работает со всеми браузерами, поддерживающими -webkit код (Safari и Chrome), а также с Firefox 4. В статью также включена версия сниппета с использованием jQuery, что нужно для более полной совместимости с различными браузерами. Т.е. вы можете видеть, как работает один и тот же эффект и на CSS и на jQuery.
Хотя код и полученный эффект минимальны, но зато вы получите более профессиональный вид своего сайта. Давайте разберем код, чтобы понять, как это все работает.
HTML
HTML будет очень чистый и простой (впрочем он такой и должен быть).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="social"> <li class="delicious"> <a href="http://www.delicious.com/"> <strong>Delicious</strong> </a> </li> <li class="digg"> <a href="http://digg.com/"> <strong>Digg</strong> </a> </li> <!-- More services --> </ul> |
Как вы видите, мы используем простой неупорядоченный список (unordered list) с элементами списка (list items), которые содержат ссылки. Со стороны покажется немного странным использовать элементы strong, для отображения подсказок, вместо стандартных элементов span, но предпочтение отдано именно strong.
Теперь коснемся общих классов, как для CSS, так и для jQuery.
CSS
CSS не сложен, основные изменения связаны с отображением элементов в строку и настройкой отображения самих элементов.
|
1 2 3 4 5 6 7 8 9 10 |
.social { list-style:none; } .social li { display:inline; float:left; } .social li a { display:block; width:48px; height:48px; position:relative; } .social li a strong { position:absolute; left:20px; top:-1px; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } li.delicious { background-image:url("../images/delicious.png"); } li.digg { background-image:url("../images/digg.png"); } |
Примите к сведению, что text-shadow, rgba и border-radius являются свойствами CSS3. Так как у предка элемента strong стоит свойство position:relative, значит мы можем использовать на элементе strong свойство position:absolute с вполне определенным значениями left и top.
А теперь самая интересная часть — анимация CSS3!
CSS3
Вы ожидаете тонны CSS3 кода? Мы огорчим вас, потому что кода будет неприлично мало:
|
1 2 3 4 5 6 7 8 9 |
.social:hover li { opacity:0.2; } .social li { transition-property: opacity; transition-duration: 500ms; } .social li a strong { opacity:0; transition-property: opacity, top; transition-duration: 300ms; } .social li:hover { opacity:1; } .social li:hover a strong { opacity:1; top:-10px; } |
Мы просто указали конкретные свойства, которые и составляют анимацию. В нашем случае, opacity (для иконки) и opacity, top (для подсказки). Мы также указали длительность анимации.
При наведении курсором мыши на эти элементы, мы изменяем значения этих свойств. Как только устанавливается свойство transition-property, браузер делает всю анимацию за нас! Просто, не правда ли? Как только курсор уходит с элемента, анимация проигрывается в обратную сторону и значения свойств элементов становятся как и прежде.
jQuery
Рассмотрим случай, когда всю работу выполняет jQuery (когда посетитель приходит на сайт с браузером, не поддерживающим CSS3, но с поддержкой JavaScript ). Хотя эффект тот же самый, но, во-первых, требует наличие библиотеки jQuery и, во-вторых, нужно намного больше кода, чтобы его реализовать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// Hide all the tooltips $("#jquery li").each(function() { $("a strong", this).css("opacity", "0"); }); $("#jquery li").hover(function() { // Mouse over $(this) .stop().fadeTo(500, 1) .siblings().stop().fadeTo(500, 0.2); $("a strong", this) .stop() .animate({ opacity: 1, top: "-10px" }, 300); }, function() { // Mouse out $(this) .stop().fadeTo(500, 1) .siblings().stop().fadeTo(500, 1); $("a strong", this) .stop() .animate({ opacity: 0, top: "-1px" }, 300); }); |
Теперь, почти все посетители смогут увидеть красивые социальные закладки!
Заключение
Такой эффект выглядит не много лучше, чем на сайте Pubwich, хотя и очень мал. Стоит отметить, что в исходниках прописаны и -webkit и -moz префиксы, для лучшей поддержки браузеров и немного больше HTML и JavaScript кода.
А что вы думаете на счет такой анимации? Можно ее еще улучшить или сделать более компактной?
