Автор

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


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

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


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

Фиксированная навигация, которая позволяет вашим пользователям получать доступ к меню в любое время, пока они испытывают ваш веб-сайт. Он меньше фиксированного заголовка полной ширины и заменяет кнопку «назад к началу» более умным решением UX.


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

Сегодня ресурс представляет собой полноразмерное изображение заголовка, анимированное с использованием свойства масштаба CSS3 и jQuery для имитации эффекта 3D-уменьшения и отображения основного содержимого страницы.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close