Автор

Эффект затухания иконок на 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). Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

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


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

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


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

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.


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

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close