Using jQuery To Make The Classic Typewriter Effect

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 to do so let’s get going. If you want to follow along you’ll need a blank html page with jQuery attached using the usual method. You will also need two divs on the page one with an id of ‘images’, another with the id of ‘caption’. The caption that we want 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.

I 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().

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 the counter char which we use later to 0. Then it clears the caption box.

This is the main animation function. All it really does is use substr to cut the caption one letter further forward each time using that 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 every 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 1 second would be extremely slow.

This part of the code just makes any links in the images div have the typewriter effect applied to them on mouseover, and removes the caption on mouseout. 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 mouseover 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.

Demo is available by clicking here. (opens in a lightbox style window) Design is not my forte so be warned. lol.

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

jQueryTypewriter