Typewriter.js

Documentation

Typewriter.js is a jQuery plugin for displaying text using a typewriter effect.

Adding it to your project

Download typewriter.js and add it to your project.

Methods

Method	Details
.typeIt(text, typeDelay, format)	text The text you want to have typed. typeDelay The base delay value to use between the display of each character. Typewriter.js automatically adds some variability to make the typing effect more natural. A value of 0.06 produces good results. format This can be either 'text' or 'html'. Use 'html' if you want to include line breaks. There is currently no support for text formatting tags (bold, italics etc).
.deleteIt(amount, rate)	amount The number of characters to delete from the end of element. rate The base delay value to use between the deletion of each character. Typewriter.js automatically adds some variability to make the backspace effect more natural.
.pauseIt(seconds)	seconds The number of seconds to pause before continuing.
.hideCursor()	Hides the blinking cursor.
.showCursor()	Shows the blinking cursor.
.clearIt()	Clears all typed text.
.destroyIt()	Destroys all typewriter related content contained in the object.

Simple typing

$('#target').clearIt().typeIt('This is a sentence that was typed.', 0.06, 'text').hideCursor();

Typing with backtracking

$('#target').clearIt().typeIt('There is an eraaasasa in this sentence!', 0.06, 'text') .pauseIt(1) .deleteIt(33, 0.09) .typeIt('are no errors in this sentence. ;)', 0.05, 'text') .hideCursor();

Line breaks!

$('#target').clearIt().typeIt('This is the first sentence.', 0.04, 'text') .pauseIt(0.2) .typeIt('\n This is a new line using the text format.', 0.07, 'text') .typeIt('<br> This is a new line using the html format.', 0.04, 'html') .pauseIt(1) .hideCursor();