From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool.
Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.
We will be using the Lettering.js jQuery Plugin which you can find on Github.
Example
In the following we will go through an example and we’ll start by the html for a little menu:
<div class="sl_examples"> <a href="#" id="example1" data-hover="Creativity">Illustrations</a> </div>
We will use data-hover to indicate the word that should appear on hover. If you don’t use the data-hover then the same word will be used on hover.
Then we will style it in the following way, making sure that we have the right properties for the structure that will be generated:
.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;
}
So, “sl-w1” is the class for the first word letters and “sl-w2” is the class for the second word letters.
Finally, we call the plugin:
$(window).load(function(){
$('#example1').hoverwords({ delay:50 });
});
The following settings can be used:
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
We hope you liked this little experiment and find it useful!
Rotating Image Slider with jQuery
Image Wall with jQuery
Great use of lettering.js! Thanks for this tutorial 🙂
Nice. It works really smooth. GJ !
so nice… it’s always like that with u! 🙂
Very nice effect as always, runs very smooth in Chrome on Windows but not so in Firefox 3.6.17.
Great tutorial, the effect looks stunning.
Great !
Very beautiful !
So many jquery out there. This one rocks by the way. I worry about how this might display on mobile platforms.
Nice!!!
Like This ^_^
It’s really amazing how jQuery is helping bring so much of the awesome animation flourishes from Flash to more optimized platforms like the iPhone. Thanks for sharing!
Great!!
your work is amazing, thank you for this tutorial
Took a couple of refreshes to see the effect but it turned out to be great! Thanks for showing 🙂
Awesome!
Mary Lou, do you know one method to make the animations run more smooth in Firefox ? or is a browser engine limitation?
very useful thanks!!
I noticed it’s not smooth on firefox 4 too. Works fine on Chrome and Opera, though.
Great plugin and thanks for letting us know about it.
Stunning as always! Runs smooth on Chromium & Firefox 4 on Ubuntu 11.04 and pretty nice on Android default web browser. Congratulations and many thanks for this beautiful tutorial.
Awesome effect.. and great tutorial too.
Awesome!!
THATS ABSOLUTELY GREAT!! I ALWAYS LOVE YOU MARY LOU! THIS IS SICK…MAKE BOUNCING TUTOTIAL ON HOVERRRR
Very nice effect. I will use it on some project for sure. Thanks!