Typewriter Text

When someone types on a typewriter or a computer keyboard, the letters all appear one at a time.
Sometimes this is exactly how you would like your visitors to see your content, as if it were being typed in, rather than all at once.
As you can see here, you get exactly this effect with this JavaScript.
Provided that you have JavaScript enabled you will see this text one character at a time exactly as if you were reading it over my shoulder as I was typing it. If you don't have JavaScript enabled then the content appears in the page all at once just as on an ordinary web page.

I first wrote this script in 2007 and that version of the script only displayed the content that is supposedly being typed if the browser had javaScript enabled. This latest version still displays the content even without JavaScript, you just lose the typewriter effect.

To copy this script to use on your own web page involves just three simple steps. First simply copy the following CSS and attach it into the head of your page:

#tw {
width : 480px;
height : 340px;
border : 2px outset #ccc;
background-color :#fffff2;
padding : 5px;
font-family : "courier new",courier,monospace;
font-size : 18px;

You can change just about anything in this CSS depending on how you want the effect to look on the screen,

Next place the text that you want to have the typewriter effect inside a div and give that div an id="tw" attribute. Note that the only HTML tag that the script can currently process is <br> tags (with or without the self closing slash) so that is the only HTML that you can include in the script and have it work properly.

Finally, copy the following JavaScript and attach it to the bottom of your page immediately prior to the </body> tag:


That's all you need to do. The specified div will now display the text one character at a time. Note that you can change the values at the end of the script if necessary. Change the 'tw' if you need to use a different id to indicate the div the effect is to apply to. Change the '~' to any character that doesn't appear in your content to allow the break tags to be converted to a single character. Change the 0 to any number of seconds and the script will start over after that period has elapsed.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow