typewrite

A javascript typewriter library which animates the typing, deleting, and selecting of text on a page

Demo

See here.

Installation

typewrite is a jQuery plugin, so it needs to be included in your HTML after jQuery. e.g:

From repo:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="dist/typewrite.min.js"></script>

From CDN:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrvautin/typewrite/master/dist/typewrite.min.js"></script>

Setup your target element to type into:

<div id="typewriteText"></div>

Some typewrite demo actions with default settings:

$(document).ready(function(){
    $('#typewriteText').typewrite({
        actions: [
            {type: 'Hello. '},
            {type: '<br>'},
            {type: 'Weclome '},
            {delay: 1500},
            {remove: {num: 1, type: 'stepped'}},
            {select: {from: 11, to: 16}},
            {delay: 2000},
            {remove: {num: 5, type: 'whole'}},
            {delay: 300},
            {type: 'lcome to typewrite. '},
            {type: '<br>'},
            {type: 'It\'s just so easy to setup and use.'}
        ]
    });
});

Using typewrite

typewrite works on actions. You pass an array of actions which will be executed in order. See example above.

actions

typewrite can add text, delay (pause), remove text and even select text.

Typing

Adding text is done by passing an object with a key of type and a value of the text you would like typed. e.g:

{type: 'Hello.'}

Remove

Removing text is done by passing a nested object with a key of remove and a nested object with the number of characters and the type of remove.

To remove 5 characters, one character at a time:

{remove: {num: 5, type: 'stepped'}}

To remove 5 characters, in one whole remove:

{remove: {num: 5, type: 'whole'}}

Note: Generally you might want to use the whole remove after you have selected some text

Select

Selecting text is done by passing a nested object with a key of select and a nested object with the index of characers you want to select.

The following will select from the 11th character to the 16th:

{select: {from: 11, to: 16}}

Delay (pause)

Delay (pause) is done by passing an object with a key of delay and a value with the amount of time in milliseconds to delay or pause.

The following will delay for 1500 milliseconds (1.5 seconds).

{delay: 1500}

Speed

You can change the typing speed midway through the actions by passing an object with a key of speed and a value with the amount of characters per second.

The following will change the typing speed to 22 characters per second.

{speed: 22}

Options

speed {integer}: Characters per second - Default: 12

blinkSpeed {integer}: Blinks per second of cursor - Default: 2

showCursor {boolean}: Whether to show the cursor - Default: true

blinkingCursor {boolean}: Whether the cursor blinks - Default: true

cursor {string}: The cursor character - Default: '|'

selectedBackground {string}: The Hex color value of the selected background - Default: '#F1F1F1'

selectedText {string}: The Hex color value of the selected text - Default: '#333333'

Providing option are done by setting the object with the actions. Eg:

$('#typewriteText').typewrite({
    blinkSpeed: 15,
    cursor: '@',
    actions: [
        {type: 'Hello. '},
        {type: '<br>'},
        {type: 'Weclome '},
        {delay: 1500},
        {remove: {num: 1, type: 'stepped'}},
        {select: {from: 11, to: 16}},
        {delay: 2000},
        {remove: {num: 5, type: 'whole'}},
        {delay: 300},
        {type: 'lcome to `typewrite`. '},
        {type: '<br>'},
        {type: 'It\'s so easy to setup and use.'}
    ]
});

Styling

If you want to add additional CSS to further style typewrite, please use the following CSS classes:

.blinkingCursor is the class applied to the blinking cursor (if enabled)

.typewriteSelected is the class applied to the selected text. You may want to add CSS rather then setting the selectedBackground and selectedText values.

Events

typewrite supports the use of events for all the actions. Some actions trigger returned data and some don't, see below for examples:

$('#typewriteText')
    .on('typewriteStarted', function() {
        console.log('typewrite has started');
    })
    .on('typewriteComplete', function() {
        console.log('typewrite has complete');
    })
    .on('typewriteTyped', function(event, data) {
        console.log('typewrite has typed', data);
    })
    .on('typewriteRemoved', function(event, data) {
        console.log('typewrite has removed', data);
    })
    .on('typewriteNewLine', function() {
        console.log('typewrite has added a new line');
    })
    .on('typewriteSelected', function(event, data) {
        console.log('typewrite has selected text', data);
    })
    .on('typewriteDelayEnded', function() {
        console.log('typewrite delay has ended');
    })
    .typewrite({
        actions: [
            {type: 'Hello. '},
            {type: '<br>'},
            {type: 'Weclome '},
            {delay: 1500},
            {remove: {num: 1, type: 'stepped'}},
            {select: {from: 11, to: 16}},
            {delay: 2000},
            {remove: {num: 5, type: 'whole'}},
            {delay: 300},
            {type: 'lcome to typewrite. '},
            {type: '<br>'},
            {type: 'It\'s just so easy to setup and use.'}
        ]
    });