Сегодня мы займемся разработкой интересного эффекта наложения с помощью jQuery, в котором не будет использоваться никакого наложения. Идея заключается в том, чтобы изменить уровень плотности цвета конкретных элементов, что имитирует эффект наложения. Это позволяет сфокусировать внимание на определенных элементах, отвлекаясь от всех посторонних.
Для начала, нам нужно определить, какие элементы будут «затухать» (т.е. на каких элементах мы хотим видеть так называемое наложение). Далее мы задаем нужным элементам класс e-fade, а элементам, которые должны поменять цвет, класс e-color. Для любого из этих элементов (неважно, какой из классов, а может и оба сразу, мы применили) нам нужно задать класс effect.
Посмотрите на пример применения данных классов в следующем коде HTML:
<!-- Animates the color -->
<h2 class="effect e-color">Custom effects with jQuery</h2>
<!-- Animates the opacity -->
<h2 class="effect e-fade">Custom effects with jQuery</h2>
<!-- Animates both color and opacity -->
<h2 class="effect e-color e-fade">Custom effects with jQuery</h2>
В нашем примере мы используем меню для того, чтобы задействовать события анимации. Когда мы наводим курсор мыши на меню, выполняются соответствующие эффекты.
Для того чтобы улучшить эффект, мы придадим еще один класс (он-то и покажет нам, какой из элементов останется нетронутым). Это даст нам возможность сфокусировать внимание посетителя на определенном элементе.
Имя класса будет таким же, как и ID для одного из пунктов меню. Таким образом, мы создаем взаимоотношение между ними:
<ul id="menu" class="menu">
<li><a href="#"><img src="images/1.png" alt="1"/></a></li>
<li><a href="#"><img src="images/2.png" alt="2"/></a></li>
<li><a href="#"><img src="images/3.png" alt="3"/></a></li>
<li><a href="#"><img src="images/4.png" alt="4"/></a></li>
<li><a href="#" id="effect-n"><img src="images/5.png" alt="5"/></a></li>
</ul>
...
<h3 class="effect-n">Vapour around me</h3>
Как видно, последний пункт меню получает относительный ID, а h3 получает класс с таким же именем. Итак, когда мы наводим курсор на пункт меню, все другие элементы (у которых выставлены предыдущие классы эффекта) будут подвержены анимации, за исключением одного конкретного.
Теперь давайте рассмотрим javascript.
Давайте начнем с кэширования некоторых элементов:
var $menu = $('#menu'),
$container = $('#container'),
$content = $container.find('.content');
Мы добавим классы для элементов, использующих jQuery вместо того, чтобы добавлять классы вручную посредством кода HTML.
$content
.find('p')
.addClass('effect e-fade')
.end()
.find('h1, h2, h3')
.addClass('effect e-fade e-color');
Теперь мы возьмём все элементы с присвоенным классом effect и определим функцию OverlayEffect, которая и будет отвечать за анимацию:
var $elems = $(document).find('.effect'),
OverlayEffect = (function(){
//speed for animations
var speed = 1000,
//the event that triggers the effect
eventOff = 'mouseenter',
//the event that stops the effect
eventOn = 'mouseleave',
//this is the color that the elements will have after eventOff
colorOff = '#AAAAAA',
//saves the original color of each e-color element,
//and calls the methods to initialize the events
init = function() {
$elems.each(function(){
var $el = $(this);
if($el.hasClass('e-color'))
$el.data('original-color',$el.css('color'));
});
initEventsHandler();
},
//initializes the events eventOff / eventOn
initEventsHandler = function() {
$menu
.delegate('a',eventOff,function(e){
//relation is the id of the element,
//and the class of related elements
var relation = $(this).attr('id');
animateElems('off',relation);
return false;
})
.delegate('a',eventOn,function(e){
var relation = $(this).attr('id');
animateElems('on',relation);
return false;
});
},
//animates the color and / or opacity
animateElems = function(dir,relation) {
var $e = $elems;
switch(dir){
case 'on' :
//if there are elements on the page with class = relation
//then these elements will be excluded from the animation
if(relation)
$e = $elems.not('.'+relation);
$e.each(function(){
var $el = $(this),
color = $el.data('original-color'),
param = {};
if($el.hasClass('e-color'))
param.color = color;
if($el.hasClass('e-fade'))
param.opacity = 1;
$el.stop().animate(param,speed);
});
break;
case 'off' :
if(relation)
$e = $elems.not('.'+relation);
$e.each(function(){
var $el = $(this),
param = {};
if($el.hasClass('e-color'))
param.color = colorOff;
if($el.hasClass('e-fade'))
param.opacity = 0.1;
$el.stop().animate(param,speed);
});
break;
}
};
return {
init : init
};
})();
/*
call the init method of OverlayEffect
*/
OverlayEffect.init();
});
Вот и готово!
Надеемся, что вам понравилась данная статья и что она вам пригодится в дальнейшем!
Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
