Делаем иконкам эффект затухания на JQuery

29 октября 2010 года, Размещено в категории: jQuery / MooTools

Делаем эффект затухания иконка (JQuery)

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

демо эффект затухания иконок на JQueryскачать эффект затухания иконок на JQuery

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

1
2

<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>

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

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

<div id="wrapper">
		<ul class="social" id="jquery">
			<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>

Шаг 3 CSS:
Иконки мы подключаем через CSS (обращайте внимание на пути иконок)

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

#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, но это поправимо подключив PIE (Progressive Internet Explorer) - Учим Internet Explorer понимать CSS3.
Кстати автором данного эффекта является Marco Kuiper блоггер, дизайнер.




Интересно будет почитать:



4 комментария

  • Андрей

    9 лет назад Ответить

    Как мило смотрится на примере.
    Благодарю за урок. Пригодится на блоге. 🙂

  • vallmind

    9 лет назад Ответить

    Спасибо за решение, буду пользоваться.только немного пугает массивность JQuery 😉

    • Webchester

      9 лет назад Ответить

      vallmind:
      Если хоть чучуть понимать JQuery код, то уже и не такой от и страшный 🙂

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

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

Перед отправкой формы: