—»     —»   Анимированный текст и меню с иконками на jQuery
  Раздел: Меню и Навигация   Комментариев: 1  

Анимированный текст и меню с иконками на jQuery



Анимированный текст и меню с иконками на jQuery

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

Вдохновение на создание подобного эффекта пришло к нам при виде Pelican Miami Beach Hotel: http://www.pelicanhotel.com/

Иконки были взяты из невероятного Noun Project, который «собирает, сортирует и добавляет всевозможные обозначения, способствующие приданию значения иконкам». Не забудьте посетить официальный веб-сайт The Noun Project.

Итак, приступим!

Каркас

В нашем HTML-коде будет неупорядоченный список, где каждый пункт списка будет содержать анкор с тремя элементами внутри него, их мы и будем анимировать:

<ul id="sti-menu" class="sti-menu">
    <li data-hovercolor="#37c5e9">
        <a href="#">
            <h2 data-type="mText" class="sti-item">
                Some text
            </h2>
            <h3 data-type="sText" class="sti-item">
                Some more text
            </h3>
            <span data-type="icon" class="sti-icon sti-icon-care sti-item">
            </span>
        </a>
    </li>
    <li>...</li>
    ...
</ul>

data-hovercolor будет использован для назначения цвета текста при наведении. Мы также внесем атрибут data-type к каждому заголовку и спану с иконкой. Это мы будем использовать позже в коде javascript.

Теперь давайте займёмся оформлением!

CSS-код

Помните, что всегда сначала нужно сбрасывать параметры с помощью reset.css, - его мы добавляем в наш основной стиль.
Сначала мы оформим неупорядоченный список и зададим ему фиксированную ширину для того, чтобы у нас была возможность центрировать его на странице:

.sti-menu{
    width:1010px;
    position:relative;
    margin:60px auto 0 auto;
}

Элементы списка будут парящими и им будет задано небольшое поле:

.sti-menu li{
    float:left;
    width:200px;
    height:300px;
    margin:1px;
}

Теперь нужно оформить анкор. Мы спрячем все, что выходит за границы, так как нам нужно анимировать элементы за пределами анкора:

.sti-menu li a{
    display:block;
    overflow:hidden;
    background:#fff;
    text-align:center;
    height:100%;
    width:100%;
    position:relative;
    -moz-box-shadow:1px 1px 2px #ddd;
    -webkit-box-shadow:1px 1px 2px #ddd;
    box-shadow:1px 1px 2px #ddd;
}

Заголовкам будет задано абсолютное позиционирование, и мы определим ширину в верхней позиции:

.sti-menu li a h2{
    color:#000;
    font-family: 'Wire One', arial, serif;
    font-size:42px;
    font-weight:bold;
    text-transform:uppercase;
    position:absolute;
    padding:10px;
    width:180px;
    top:140px;
    text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
    font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
    font-size:18px;
    font-style:italic;
    color: #111;
    position:absolute;
    top:248px;
    width:180px;
    padding:10px;
}

Каждому спану иконки будет присвоен последующий класс, а также один специальный, в котором будет задано правильное фоновое изображение. Изображения будут состоять как из цветных, так и из черных иконок. Мы изменим расположение фона посредством javascipt, как только анимируем иконку за пределами анкора.

.sti-icon{
    width:100px;
    height:100px;
    position:absolute;
    background-position:top left;
    background-repeat:no-repeat;
    background-color:transparent;
    left:50px;
    top:30px;
}
.sti-icon-care{
    background-image:url(../images/care.png);
}
.sti-icon-alternative{
    background-image:url(../images/alternative.png);
}
.sti-icon-family{
    background-image:url(../images/family.png);
}
.sti-icon-info{
    background-image:url(../images/info.png);
}
.sti-icon-technology{
    background-image:url(../images/technology.png);
}

Вот и всё, что касается оформления! Теперь начинается все самое интересное!

javascript

Так как здесь мы используем плагин, давайте для начала зададим настройки по умолчанию:

var settings = {
    // configuration for the mouseenter event
    animMouseenter        : {
        'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
        'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
        'icon'  : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
    },
    // configuration for the mouseleave event
    animMouseleave        : {
        'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
        'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
        'icon'  : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
    },
    // speed for the item bg color animation
    boxAnimSpeed        : 300,
    // default text color (same defined in the css)
    defaultTextColor    : '#000',
    // default bg color (same defined in the css)
    defaultBgColor        : '#fff'
};

Для каждого из наших элементов у нас будет указана скорость анимации, эффект выемки, скорость задержки, а также направление (1 – вверх, 0 – вниз).
У нас также будет указана скорость анимации фонового цвета, анимация пунктов меню, а также текста и фонового цвета, который указан в нашем коде CSS.

return this.each(function() {
    // if options exist, lets merge them with our default settings
    if ( options ) {
        $.extend( settings, options );
    }

    var $el             = $(this),
        // the menu items
        $menuItems        = $el.children('li'),
        // save max delay time for mouseleave anim parameters
    maxdelay    = Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay ,
                            settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay ,
                            settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay
                          ),
        // timeout for the mouseenter event
        // lets us move the mouse quickly over the items,
        // without triggering the mouseenter event
        t_mouseenter;

    // save default top values for the moving elements:
    // the elements that animate inside each menu item
    $menuItems.find('.sti-item').each(function() {
        var $el    = $(this);
        $el.data('deftop', $el.position().top);
    });

    // Events
    ...

});

Давайте создадим событие mouseenter для каждого пункта меню:

$menuItems.bind('mouseenter', function(e) {

    clearTimeout(t_mouseenter);

    var $item        = $(this),
        $wrapper    = $item.children('a'),
        wrapper_h    = $wrapper.height(),
        // the elements that animate inside this menu item
        $movingItems= $wrapper.find('.sti-item'),
        // the color that the texts will have on hover
        hovercolor    = $item.data('hovercolor');

    t_mouseenter    = setTimeout(function() {
        // indicates the item is on hover state
        $item.addClass('sti-current');

        $movingItems.each(function(i) {
            var $item            = $(this),
                item_sti_type    = $item.data('type'),
                speed            = settings.animMouseenter[item_sti_type].speed,
                easing            = settings.animMouseenter[item_sti_type].easing,
                delay            = settings.animMouseenter[item_sti_type].delay,
                dir                = settings.animMouseenter[item_sti_type].dir,
                // if dir is 1 the item moves downwards
                // if -1 then upwards
                style            = {'top' : -dir * wrapper_h + 'px'};

            if( item_sti_type === 'icon' ) {
                // this sets another bg image position for the icon
                style.backgroundPosition    = 'bottom left';
            } else {
                style.color                    = hovercolor;
            }
            // we hide the icon, move it up or down, and then show it
            $item.hide().css(style).show();
            clearTimeout($item.data('time_anim'));
            $item.data('time_anim',
                setTimeout(function() {
                    // now animate each item to its default tops
                    // each item will animate with a delay specified
                    // in the options
                    $item.stop(true)
                         .animate({top : $item.data('deftop') + 'px'}, speed, easing);
                }, delay)
            );
        });
        // animate the bg color of the item
        $wrapper.stop(true).animate({
            backgroundColor: settings.defaultTextColor
        }, settings.boxAnimSpeed );

    }, 100);    

})

А затем мы определим событие mouseleave, где всё будет в точности да наоборот:

// mouseleave event for each menu item
.bind('mouseleave', function(e) {

    clearTimeout(t_mouseenter);

    var $item        = $(this),
        $wrapper    = $item.children('a'),
        wrapper_h    = $wrapper.height(),
        $movingItems= $wrapper.find('.sti-item');

    if(!$item.hasClass('sti-current'))
        return false;        

    $item.removeClass('sti-current');

    $movingItems.each(function(i) {
        var $item            = $(this),
            item_sti_type    = $item.data('type'),
            speed            = settings.animMouseleave[item_sti_type].speed,
            easing            = settings.animMouseleave[item_sti_type].easing,
            delay            = settings.animMouseleave[item_sti_type].delay,
            dir                = settings.animMouseleave[item_sti_type].dir;

        clearTimeout($item.data('time_anim'));

        setTimeout(function() {

            $item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() {

                if( delay + speed === maxdelay ) {

                    $wrapper.stop(true).animate({
                        backgroundColor: settings.defaultBgColor
                    }, settings.boxAnimSpeed );

                    $movingItems.each(function(i) {
                        var $el                = $(this),
                            style            = {'top' : $el.data('deftop') + 'px'};

                        if( $el.data('type') === 'icon' ) {
                            style.backgroundPosition    = 'top left';
                        } else {
                            style.color                    = settings.defaultTextColor;
                        }

                        $el.hide().css(style).show();
                    });

                }
            });
        }, delay);
    });
});

И на этом всё! Надеемся, что вам понравилась эта статья, и она окажется полезной вам в вашем нелегком деле!

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

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 13559   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 февраля 2012 @ 10:01
Написал: Nik#69 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошая статья. Беру на вооружение.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Чат рулетка
Чат, форум. Возможность построить чат на нужную тему
virtruletka.com
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2018    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930