Эффект затухания иконок на jQuery Эффект затухания иконок на jQuery

 

При создании сайта хочется сделать его как можно лучше и удобней, по этому расскажу как сделать замечательный эффект затухания  иконкам с помощью JQuery. Удобно, просто и красиво выглядит, весь принцип данного эффекта в том, что когда мы приводим мышкой на одну из иконок другие затухают. Это позволит визуально разгрузить сайт, не нагромождая его , при этом подчеркивая необходимую информацию для пользователей. Все достаточно просто и со вкусом, вот что у нас с этого получилось..

 

ДЕМО
ИСХОДНИКИ

 

Для начала рассмотрим подключение фреймворков . Подключаем фреймворк JQuery и наш js код который находится в файле script.js между тэгом head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/script.js"></script>

 


Следующим этапом будет создание разметки HTML,  код у нас очень простой, между тэгом <strong> вписываем лозунг который будет появляться при наведении курсора на иконку.

<div id="wrapper">
<ul id="jquery" class="social">
	<li class="delicious"><a href="#"><strong>Delicious</strong></a></li>
	<li class="digg"><a href="#"><strong>Digg</strong></a></li>
	<li class="facebook"><a href="#"><strong>Facebook</strong></a></li>
	<li class="flickr"><a href="#"><strong>Flickr</strong></a></li>
	<li class="linkedin"><a href="#"><strong>LinkedIn</strong></a></li>
	<li class="reddit"><a href="#"><strong>Reddit</strong></a></li>
	<li class="rss"><a href="#"><strong>RSS</strong></a></li>
	<li class="twitter"><a href="#"><strong>Twitter</strong></a></li>
</ul>
</div>

 

И так, последним, но пожалуй, самым важным шагом, будет создание стилей  CSS, так как данный прием позволит нам добиться эффекта затухания иконок.

В данных стилях мы подключаем изображения, обращайте внимание к правильному пути изображений:

#wrapper { width:800px; margin:40px auto; }

.social {
list-style:none;
margin:30px auto;
width:464px; }

.social li {
display:inline;
float:left;
background-repeat:no-repeat; }

.social li a {
display:block;
width:48px;
height:48px;
padding-right:10px;
position:relative;
text-decoration:none; }

.social li a strong {
font-weight:normal;
position:absolute;
left:20px;
top:-1px;
color:#fff;
padding:3px;
z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75);
background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px;
 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 -webkit-border-radius:3px;
 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 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"); }
li.facebook { background-image:url("../images/facebook.png"); }
li.flickr { background-image:url("../images/flickr.png"); }
li.linkedin { background-image:url("../images/linkedin.png"); }
li.reddit { background-image:url("../images/reddit.png"); }
li.rss { background-image:url("../images/rss.png"); }
li.twitter { background-image:url("../images/twitter.png"); }

 

Но есть маленький минус в IE эффект всплывающих подписей не работает так как используются несколько функций CSS3, но это поправимо подключив (Progressive Internet Explorer). Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!