Sliding Letters with jQuery

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. […]

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.


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>

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:

	font-family: 'Bevan', arial, serif;
.sl_examples a{
.sl_examples a > span{
.sl_examples a span span{
.sl_examples a span{
	text-shadow:0px 0px 1px #fff;
.sl_examples a span{
	text-shadow:-1px 1px 2px #9f0633;

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:

	$('#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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 61

Comments are closed.
  1. Very nice effect as always, runs very smooth in Chrome on Windows but not so in Firefox 3.6.17.

  2. So many jquery out there. This one rocks by the way. I worry about how this might display on mobile platforms.

  3. 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!

  4. Took a couple of refreshes to see the effect but it turned out to be great! Thanks for showing 🙂

  5. Awesome!

    Mary Lou, do you know one method to make the animations run more smooth in Firefox ? or is a browser engine limitation?

  6. 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.

  7. 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.


  9. A really great effect! I will definitely utilize this in my upcoming projects! You guys never fail to amaze me!

  10. Very nice, but I’m having trouble with 2 things:

    On is a hidden menu (bottom left, click the +). The text there is jumbled but works fine after rolling over once. Any idea what’s wrong?

    How to change easing? And what to do if I’d prefer no easing at all?

    Keep up the good work!

    • Hi! I can’t access the site but I would guess that the style is not being applied to your words/text? The plugin is made to work with easing but you can choose a suitable effect:
      Just add the setting when you call the plugin. Hope it helps, cheers, ML

  11. Mary Lou, thanks for your help and the useful link. I think the problem has to do with a conflicting js, not CSS. I decided to drop the effect in that part of the site as it was too gimmicky.
    Thanks again!

  12. Hi, great work, am new to this site, and I’ve been finding the tutorials and plugins on here to be a God sent.

    I have a small problem, Instead of replacing the initial text with another text on data-hover, how can it be replaced with a div instead.

    Basically what I want is for an element to slide and change to another element or div when hovered on. For example when a text ‘HOME’ is hovered on, it should slide away and reveal the site’s navigation.

    Thanks. Keep up the great work, Hope to hear from you soon.

  13. Really is an amazing effect, but where use with phrases (words separated by spaces), the shows together without spaces, have any manner to modify this?

  14. 1. Thank you!
    2. How can we separate 2 words in this animated letters? It’s even possible?

  15. … okej… i found the solution if we have 2 words. Just add CSS style: white-space: pre;


    .sl_examples a{
    word-spacing: 5px;
    white-space: pre;