jquery.typist

Animated text typing.

Live demo

Install

Download latest release. Use minified or development version.

Or use bower for install:

bower install jquery.typist --save 

Usage

Include jQuery and jquery.typist on your page:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="jquery.typist.js"></script>

Prepare element for typing:

<p class="typist"></p>

Call method typist() with necessary options and text:

jQuery(function($) { 	$('.typist').typist({ 		speed: 12, 		text: 'Hello!' 	}); }); 

Options

• text {String} – text for typing;
• speed {Number} – characters per second, default – 10;
• cursor {Boolean} – shows blinking cursor, default – true;
• blinkSpeed {Number} – blinking per second, default – 2;
• typeFrom {String} – typing from start/end of element, default – 'end';
• cursorStyles {Object} – CSS properties for cursor element.

Methods

• typist( [options] ) – init method;
• typistAdd( [text], [callback] ) – additional text for typing;
• typistRemove( [length], [callback] ) – removes length number of characters;
• typistPause( [delay], [callback] ) – pauses for delay milliseconds;
• typistStop() – stops all animations.

Events

• start_type.typist
• end_type.typist
• start_pause.typist
• end_pause.typist
• start_remove.typist
• end_remove.typist
• tick.typist

Try the Demo

$('.typist') 	.on('start_type.typist', function() { 		console.log('Start typing'); 	}) 	.on('end_type.typist', function() { 		console.log('End typing'); 	}) 	.typist({  		speed: 12, 		text: 'Hello, typist!\n' 	});