Simulating Typing, Deleting And Selecting Text With jQuery - typewrite

typewrite is a tiny jQuery typing animation plugin which allows to simulate someone typing, deleting and selecting given words defined in the JavaScript.

Basic usage:

1. Add the JavaScript file typewrite.js to the webpage, after you've loaded jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/typewrite.js"></script>

2. Create an empty DIV container in which your want to print the text.

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

3. Attach the plugin to the container element and define type/remove/select/delay actions and text as JS objects to the actions array as follows:

$('#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 so easy to setup and use.'}
  ]
});

4. Default settings for the typing animation.

$('#typewriteText').typewrite({

  // typing speed
  speed: 12,

  // blinking speed
  blinkSpeed: 2,

  // show blinking cursor
  showCursor: true,

  // enable blinking cursor
  blinkingCursor: true,

  // cursor character
  cursor: '|',

  // background color of selected text
  selectedBackground: '#F1F1F1',

  // font color of selected text
  selectedText: '#333333'
  
});

5. Events.

$('#typewriteText')
.on('typewriteStarted', function() {
    // typewrite has started
})
.on('typewriteComplete', function() {
    // typewrite has complete
})
.on('typewriteTyped', function(event, data) {
    // typewrite has typed', data);
})
.on('typewriteRemoved', function(event, data) {
    // typewrite has removed', data);
})
.on('typewriteNewLine', function() {
    // typewrite has added a new line
})
.on('typewriteSelected', function(event, data) {
    // typewrite has selected text', data);
})
.on('typewriteDelayEnded', function() {
    // typewrite delay has ended
})

---

This awesome jQuery plugin is developed by mrvautin. For more Advanced Usages, please check the demo page or visit the official website.