jQuery typing animation plugin

Typing animation for any text on webpage

Getting Started

Download the production version or the development version.

Example

HTML:

<p class="demo">Leciała {pszczoła}mucha z Łodzi do Zgierza,<br /> Po drodze patrzy: strażacka wieża,<br /> Na wieży strażak zasnął i chrapie,<br /> W dole pod wieżą gapią się {lud}gapie.</p>  <script src="jquery.js"></script> <script src="jquery-typing-animation-plugin.min.js"></script>

JavaScript:

$('p.demo').jtap({ 	startDelay: 0, 	cursor: true, 	speed: 20,  	backspaceSpeed: 50, 	humanize: true, 	skipTags: false, 	onStart: function() 	{ 		// do something before start typing 	}, 	onTypeBefore: function( idx, char, text ) 	{  		// do something before type char 		// when idx is index of this char  		if( idx === 5 ) 		{ 			// do something when char index is 5 		}  	}, 	onTypeAfter: function( idx, char, text ) 	{ 		// do something after char is typed 		// when idx is index of this char  		if( idx === 5 ) 		{ 			// do something when char with index 5 was typed 		} 	}, 	onComplete: function() 	{ 		// do something after typing is complete 	} });

Options

Config

• startDelay - delay in miliseonds (default: 0)
• cursor - boolean true or false (default: true)
• speed - typing speed ratio (default: 50)
• backspaceSpeed - erasing speed ratio (default: 200)
• humanize - randomize speed of typing single char (default: true)
• skipTags - skip HTML tags (default: true)

Callbacks

• onStart - triggered before startying typing
• onTypeBefore - triggered before type char
• onTypeAfter - triggered after char is typed
• onComplete - triggered when typing is end

Methods

• .jtap('pause', [optional pause time in miliseconds]) - if you not set optional pause time, then you must use .jtap('resume'), to resume typing.
• .jtap('resume') - resume typing after pause.
• .jtap('reset', [optional startDelay]) - reset typing and start again

License

MIT © Michał Baryś