Эффект перекрытия элементов - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Папка это?
Всего ответов: 1109
Статистика


Онлайн всего: 2
Гостей: 1
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Эффект перекрытия элементов

Хочешь сказать спасибо? Кликни на рекламный баннер.

07.10.2012, 20:45
Сегодня будем делать плавный эффект перекрытия или наложения на jQuery. Идея заключается в изменении прозрачности или цвета отдельных элементов, как будто мы выполнили наложение на контент нового слоя. Это позволяет сосредоточить внимание пользователя на отдельных элементах веб-страницы, делая другие менее заметными.Во-первых, нам необходимо определить, к каким элементам мы хотим применить тот или иной эффект, как анимация прозрачности или цвета элемента, или и то и другое. Для элементов, которые хотим затенить, назначаем класс "e-fade", которые хотим перекрасить, назначаем класс "e-color". И для любого из этих элементов, независимо от того, какой класс они используют, или оба сразу, мы должны присвоить дополнительный класс "effect".
Code
<!-- Анимация цвета -->
<h2 class="effect e-color">Пользовательский эффект на jQuery</h2>
<!-- Анимация прозрачности -->
<h2 class="effect e-fade">Пользовательский эффект на jQuery</h2>
<!-- Анимация и цвета и прозрачности -->
<h2 class="effect e-color e-fade">Пользовательский эффект на jQuery</h2>

В head вставляем:
Code
<link rel="stylesheet" type="text/css" href="http://megascripts.ru/demo/perekr_elemento/styles.css" />

В нашем примере мы будем использовать меню запускающего анимацию событий. При наведении мыши на пункт меню, то к элементу будет применен тот или иной эффект. Для усиления концентрации внимания мы добавим ещё один класс для определенных элементов над которыми не будет производиться анимация. Название класса будет таким же, как и ID для одного из пунктов меню. Таким образом мы создаем связь между ними:
В body:
Code
<div id="container" class="container">
<ul id="menu" class="menu">
<li><a href="#" id="effect-a"><img src="http://megascripts.ru/demo/perekr_elemento/1.png" alt="1"/></a></li>
<li><a href="#" id="effect-n"><img src="http://megascripts.ru/demo/perekr_elemento/2.png" alt="2"/></a></li>
<li><a href="#" id="effect-b"><img src="http://megascripts.ru/demo/perekr_elemento/3.png" alt="3"/></a></li>
<li><a href="#"><img src="http://megascripts.ru/demo/perekr_elemento/4.png" alt="4"/></a></li>
<li><a href="#"><img src="http://megascripts.ru/demo/perekr_elemento/5.png" alt="5"/></a></li>
</ul>
<div class="content">
<h1 class="effect-a">Эффект перекрытия элементов</h1>
<h2 class="effect-a">использует jQuery</h2>
< class="effect-a">Быть знаменитым некрасиво.
Не это подымает ввысь.
Не надо заводить архива,
Над рукописями трястись.</p>
</div>
</div>

Как вы наверно заметили, то первый пункт меню получит соответствующий ID (id="effect-a"), и h3, p (class="effect-a") получили класс с тем же названием. Поэтому, когда мы наведем курсор мыши на пункт меню все другие элементы (у которых есть предыдущие классы эффекта) будут анимированы, кроме этого.

Стиль и иконки находятся в архиве.
Вот и всё.





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

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 4090 | Загрузок: 291 | Рейтинг: 4.2/6
Теги: скрипт, эффект перекрытия элементов, перекрытия элементов
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

У кузнечиков около 900 мышц, у некоторых гусениц до четырех тысяч.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта