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

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

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


Чат рулетка
Чат, форум. Возможность построить чат на нужную тему
virtruletka.com
Военный адвокат
Профессиональные услуги адвокатов. Сотни предложений. Быстрый поиск
1zakon.su
Медальница спортивная
Закажите именную медальницу из дуба с индивидуальному дизайном
ecodecor-shop.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930