В данном случае мы воспользуемся плагином jQuery Lettering.js, который вы можете найти на Github.
Пример
Давайте начнём с небольшого меню на 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
Надеемся, вам понравился этот небольшой эксперимент, и он пригодится вам!
Смотреть демо | Скачать архивом