JavaScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
html Fixes #4, callback argument for methods: typistAdd, typistRemove and… Mar 2, 2015
src
.jscs.json
Changelog.md
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

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'
	});