Главная > Руководства > Скользящие буквы посредством jQuery
Скользящие буквы посредством jQuery7 июня 2011, 16:15. Разместил: Mysterious Master |
Сегодня мы расскажем вам о создании интересного эффекта. Давайте немного «оживим» стандартный эффект изменения ссылки при наведении курсора мыши. Наша цель – сделать так, чтобы ссылка при наведении составилась из отдельных скользящих букв. К тому же, мы можем оставить тот же текст ссылки, либо уже сгененрировать новый, а также мы можем сделать, чтобы текст ссылки выезжал сразу весь, либо по одной букве. В данном случае мы воспользуемся плагином jQuery Lettering.js, который вы можете найти на Github. Пример Давайте начнём с небольшого меню на HTML:
Мы будем использовать data-hover для определения слова, которое должно появляться при наведении курсора. Если вы не будете использовать data-hover, то отображаться будет то же самое слово. Затем мы оформляем всё это следующим образом, что даёт нам возможность быть уверенными в том, что все параметры будущей структуры выставлены правильно:
Итак, класс «sl-w1» для букв первого слова и «sl-w2» для букв второго слова. Наконец, мы можем загрузить плагин:
Далее могут быть использованы следующие настройки:
Надеемся, вам понравился этот небольшой эксперимент, и он пригодится вам! Смотреть демо | Скачать архивом Вернуться назад |