Using jQuery To Make The Classic Typewriter Effect

/ jQuery / by Paul Robinson / 10 Comments
This post was published back on June 25, 2008 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.
This tutorial is very old and I have a newer version available. Check out how to make a more up-to-date Typewriter using jQuery.

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

10 Comments

Author’s gravatar author

The demo should be up shortly just having a few problems with wordpress being a pain at the minute. Sorry.

Reply
Author’s gravatar

Thanks for this, I’m going to use this for my site. Very nice indeed.

Reply
Author’s gravatar author

Not a problem. This tut needs re-doing as I’ve just re-designed the blog & some posts have gone a little crappy. Glad you still found a use for it though. 🙂

Author’s gravatar

Very nice tutorial, i’m going to use it. Haven’t been able to code yet, but should be pretty easy to autoplay right?

Reply
Author’s gravatar author

Yup just swap aroun the actions of the hovers, so the first reveals & second hides and the add a call the the reveal function in the on Dom ready so it runs on page koad.

Older Comments
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more