Using jQuery To Make The Typewriter Effect

Posted 1 month, 3 weeks ago at 2:16 pm. 4 comments

Ok, so it’s an old effect that has been done in javascript probably a million times, but I’ve seen it used on a few sites quite effectively. By typewriter effect I mean the sentence types itself onto the screen rather than just appearing.

It’s really simple so let’s get going. If you want to follow along you’ll need a blank html page with jQuery attached in the head. You will also need two divs on the page one with an id of ‘images’, another with the id of ‘caption’. The caption to show will be held in the links title attribute.

Ok let’s get on with the jQuery. First we will make the showCaption() function that will tell the code what caption it should show and then tell it to do it using the typing effect.

var char = 0;
var caption = "";
var standby;
 
function showCaption(obj) {
	caption = obj.attr('title');
	if(caption)
		type();
}

Nearly forgot the three variables in the start of the code must be set before anything else. The showCaption() is quite simple. We pass through the object we wish to take the caption from, we assign the caption to the variable we made called caption using the attr() function. We then check to make sure caption wasn’t empty if it wasn’t we run type().

function hideCaption(obj) {
	caption = "";
	char = 0;
	$('#caption').html("");
}

hideCaption() is just as simple. We will show the caption on mouseover and hide it on mouseout. All it does is clear the caption and set char counter we use later to 0. Then it clears the caption box.

function type() {	
	$('#caption').html(caption.substr(0, char++));
	if(char < caption.length+1)
		setTimeout("type()", 28);
	else {
		char = 0;
		caption = "";
	}	
}

This is the main animation function. All it really does is use substr to cut the caption one letter further each time using a counter variable named char. So if the caption is ‘I am an image’ it would show ‘I’ then ‘I ‘ then ‘I a’ and so on until it completes the whole caption. It writes one letter ever 28 milliseconds which is quite a good speed but it can be slowed down by increasing the number. Remember there’s 1000 milliseconds per second although methinks 1 second would be extremely slow, lol.

$(function() {
	$('#images a').each(function() {
		$(this).mouseover(function() {
			showCaption($(this));
		}).mouseout(function() {
			hideCaption($(this));
		})
	});
});

This part of the code just makes any links in the images div have the typewriter effect applied to them on mouse over and removes the caption on mouse out. I called the div images because this effect is usually used for images but it can be used on anything that you can apply a mouse over to.

Ok so that’s it. You should now have a working typewriter effect. It could be improved and over time I might add a few things such as the flashing underscore that a dos prompt usually has.

Anyway here is an example of the code working:

The jumping is caused by Wordpress so don’t worry, as long as your css styling is correct it shouldn’t cause any problems.

Hope you enjoyed this tutorial. Any questions please just leave a comment.