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.

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!

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. Hello , It’s Very Nice Design But i Have a problem . how i can change the codes for automatic play ? please help me or give me a demo 😡

  2. Mary,
    really Brilliant ! Just awesome..

    I was searched a lot for this..now I got the concept with cufon & jquery…

    I am sure to work with it in my next project.
    Thanks A lot 🙂

  3. Awesome script!
    I’m going to use this in a menu, but is there a way to give the current menu a different color?
    I tried .sl_menu li. current and .sl_menu a:current but both won’t work.

    Thanks!

  4. I found out that this is working:

    .sl_menu li .current{
    background-color: red;
    }

    But I prefer a text color and that doesn’t work…