—»     —»   Эффект наложения на jQuery
  Раздел: Руководства   Нет комментариев  

Эффект наложения на jQuery



Эффект наложения на jQuery

Сегодня мы займемся разработкой интересного эффекта наложения с помощью 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();
});

Вот и готово!

Надеемся, что вам понравилась данная статья и что она вам пригодится в дальнейшем!

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 6871   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031