typeright

A simple javascript plugin for creating typewriter effects.

mediastuttgart.github.io/typeright

Code pattern and docs inspired by the wonderful imagesLoaded plugin from David DeSandro

Latest version

0.1.0

Documentation

08/04/13

Install

Get a packaged source file:

• typeright.pkgd.js
• typeright.pkgd.min.js

Or install via Bower:

bower install typeright

Build

First, clone a copy of the main typeRight git repository by running:

git clone git://github.com/mediastuttgart/typeright.git

Install the grunt-cli and bower packages if you haven't before. These should be done as global installs:

npm install -g grunt-cli bower

Make sure you have grunt and bower installed by testing:

grunt -version
bower -version

Enter the typeRight directory and install the Node and Bower dependencies:

cd typeright && npm install && bower install

Then run grunt to build typeRight:

grunt

The built version of typeRight will be put in the dist/ subdirectory, along with the minified copy and packaged version including dependencies.

Usage

typeRight(element, options, callback);

you can use new if you like

new typeRight(element, options, callback);

• element Element, NodeList, Array, or Selector String
• options Object, Object of options passed to the instance
• callback Function - Function triggered after all characters have been processed

Using a callback function is the same as binding it to the always event (see below).

Element

typeRight(document.querySelector('#container'), options, function (instance) {
    console.log(instance);
});

Selector string

typeRight('#container', options, function () {...});

Multiple elements

var buttons = document.querySelectorAll('.button');
typeRight(buttons, options, function () {...});

Type example

typeRight(element, {
    content: 'A simple javascript plugin for creating typewriter effects.',
    append: true,
    delay: 20,
    easing: true
});

Erase example

typeRight(element, {
    erase: true,
    delay: 40,
    easing: true
});

Options

Events

typeRight is an Event Emitter. You can bind event listeners to events.

var typer = typeRight(element, options);
function onAlways (instance) {
    console.log('always');
}

Bind with .on()

typer.on('always', onAlways);

Unbind with .off()

typer.off('always', onAlways);

always

typer.on('always', function (instance) {
    console.log('always - all characters have been processed');
});

Triggered after all characters have been processed.

• instance TypeRight - typeRight instance

done

typer.on('done', function (instance) {
    console.log('always - all characters have been successfully processed');
});

Triggered after all characters have been successfully processed.

• instance TypeRight - typeRight instance

progress

typer.on('progress', function (instance, position, element) {
    console.log('current caret position: ' + position);
});

Triggered after a single character has been processed.

• instance TypeRight - typeRight instance
• position number - current position of the caret
• element object - element with which typeRight operates

jQuery

If you include jQuery, typeRight can be used as a jQuery Plugin.

$('#container').typeRight(options, function () {
  // callback
});

jQuery Deferred

The jQuery plugin returns a jQuery Deferred object. This allows you to use .always(), .done() and .progress(), similarly to the emitted events.

$('#container').typeRight(options)
    .always(function (instance) {
        console.log('always - all characters have been processed');
    })
    .done(function (instance) {
        console.log('always - all characters have been successfully processed');
    })
    .progress(function (instance, position, element) {
        console.log('current caret position: ' + position);
    });

RequireJS

typeRight works with RequireJS.

1. Install typeRight and its dependencies
2. Update your RequireJS paths config so it can find those modules

requirejs.config({
    paths: {
        "eventEmitter": "vendor/eventEmitter"
    }
});

MIT License

typeRight is released under the MIT License.