Usage

jquery.typer.js can be used one of two ways:

Type once with typeTo()

If you just want to use the effect once, you should use typeTo(). It can be used as follows:

$('h3').typeTo("New Text");

This will do a one-time transition.

Type indefinitely with typer()

Now let's say you want to loop over a set of strings for the typing effect. Easy!

 $('[data-typer-targets]').typer() 

That code will start the effect on all elements with the data-typer-targets attribute.

You obviously need to supply it with some source data. The data-typer-targets attribute can be + either a comma-separated string or a piece of JSON.

Customize

There are a few options that you can customize.

  $.typer.options = {
+      highlightSpeed    : 20,
+      typeSpeed         : 100,
+      clearDelay        : 500,
+      typeDelay         : 200,
+      clearOnHighlight  : true,
+      typerDataAttr     : 'data-typer-targets',
+      typerInterval     : 2000
+  };

Set them individually:

  $.typer.options.highlightSpeed = 1000; 

Or as a whole:

  $.typer.options = {
+      typeSpeed: 10,
+      typerDataAttr: 'data-values'
+  }; 

Options must be set before invoking typer() or typeTo()

Created by Allan Grinshtein and Kelly Sutton of LayerVault.

Released under the MIT license.