Typer.js

Documentation

Get Typer.js

Getting Started

Getting ready to use Typer.js very simple; all of Typer.js is packaged in one short javascript file.
Place the following at the end of your html file, right before the body tag closes. Be sure to change the filepath in src to reflect your case.

<script src='typer.js'></script>

That's it. Here's an example typer to get you started:

<p>I enjoy <span class="typer" data-delay="150" data-words="apples,oranges,blueberries" data-colors="red,orange,blue"></span></p>

Add the following after your typer span to create a cursor. Make sure to add id="first-typer" to the typer as well, or else cursor won't know who to listen to.

<span class="cursor" data-owner="first-typer"></span>

Note: If you'd like to load the Typer.js file somewhere else, or be extra sure that all of your DOM elements have loaded before attempting to hook them up, then you can move the TyperSetup() call at the end of Typer.js to wherever you'd like (suggestion: in a jQuery didLoad).

class typer

Defines a DOM element as a target for the typing effect.

Options
data-words
A comma-delimited list of words to be typed.
Default: 'override these,sample typing'
data-delim Specifies the delimiter used in data-words
Default: ,
data-delay The time delay (ms) between typed characters.
Default: 200
id (is potential dependency) A unique identifier that can be used to set the owner property of other objects. This must be set if a cursor, typer-start, or typer-stop is used with this typer.
data-deleteDelay The time delay (ms) before a completed word is de-typed.
Default: 800
data-colors A comma-delimited list of colors to cycle through. One color per word.
Default: black

class cursor

Converts a DOM element into a blinking cursor.

Options
data-owner (required) Specifies the id of the typer DOM object associated with this cursor.
data-cursorDisplay The cursor representation.
Default: _

class typer-start

Turns a DOM element into a button to start a given typer.

Options
data-owner (required) Specifies the id of the typer DOM object associated with this button.

class typer-stop

Turns a DOM element into a button to stop a given typer.

Options
data-owner (required) Specifies the id of the typer DOM object associated with this button.