Автор

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close