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

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!

Previous:
Next:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 61

Comments are closed.
  1. 2

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

  2. 4

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

    On http://www.beautifullalaland.com/sub.html 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!

    • 5

      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: http://jqueryui.com/demos/effect/easing.html
      Just add the setting when you call the plugin. Hope it helps, cheers, ML

  3. 6

    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!

  4. 10

    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.

  5. 18

    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?

Comments are closed.