—»     —»   Скользящие буквы посредством jQuery
  Раздел: Руководства   Нет комментариев  

Скользящие буквы посредством jQuery

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

В данном случае мы воспользуемся плагином jQuery Lettering.js, который вы можете найти на Github.

Скользящие буквы посредством jQuery

Пример

Давайте начнём с небольшого меню на HTML:

<div class="sl_examples">
    <a href="#" id="example1" data-hover="Creativity">Illustrations</a>
</div>

Мы будем использовать data-hover для определения слова, которое должно появляться при наведении курсора. Если вы не будете использовать data-hover, то отображаться будет то же самое слово.
Затем мы оформляем всё это следующим образом, что даёт нам возможность быть уверенными в том, что все параметры будущей структуры выставлены правильно:

.sl_examples{
    float:left;
    font-family: 'Bevan', arial, serif;
    font-size:50px;
    line-height:50px;
    color:#f0f0f0;
    margin-right:5px;
    text-transform:uppercase;
}
.sl_examples a{
    display:block;
    position:relative;
    float:left;
    clear:both;
    color:#fff;
}
.sl_examples a > span{
    height:50px;
    float:left;
    position:relative;
    overflow:hidden;
}
.sl_examples a span span{
    position:absolute;
    display:block;
    left:0px;
    top:0px;
    text-align:center;
}
.sl_examples a span span.sl-w1{
    color:#fff;
    text-shadow:0px 0px 1px #fff;
    z-index:2;
}
.sl_examples a span span.sl-w2{
    color:#e82760;
    text-shadow:-1px 1px 2px #9f0633;
    z-index:3;
}

Итак, класс «sl-w1» для букв первого слова и «sl-w2» для букв второго слова.

Наконец, мы можем загрузить плагин:

$(window).load(function(){
    $('#example1').hoverwords({ delay:50 });
});

Далее могут быть использованы следующие настройки:

delay        : false,        // each letter will have different animation times
speed        : 300,            // animation speed
easing        : 'jswing',        // easing animation
dir            : 'leftright',     // leftright - current goes left, new one goes right || rightleft - current goes right, new one goes left,
overlay        : false,        // hover word is slided on top of the current word (just for the case when the hover word equals word)
opacity        : true            // animate the letters opacity

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

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

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

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Металлический шкаф
Металлические щиты, верстаки и шкафы различного назначения
omz70.ru
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







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