Simple Fast Text Typing Animation In JavaScript/jQuery - Typing.js

File Size: 17.7 KB
Views Total: 5482
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Fast Text Typing Animation In JavaScript/jQuery - Typing.js

Typing.js is a simple, lightweight jQuery/JavaScript typing animation plugin that allows to type an array of text strings in a selected element with custom caret character.

How to use it:

1. Include the minified version of the Typing.js library on the webpage.

<script src="typing.js"></script>

2. Include the OPTIONAL jQuery library if you want to implement the Typing.js as a jQuery plugin.

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

3. Initialize the plugin and define your own text strings to be typed in a specific element P.

// Pure JavaScript
Typing.new('p', { sentences: ["Hello", "Ths s the", "This is the demo"] });

// jQuery
$('p').typing({
  sentences: ["Hello", "Ths s the", "This is the demo"]
});

4. You're able to customize the text typing animation with the following options.

$('p').typing({
  sentences: ['Hello typing.js'],
  caretChar: '_',
  caretClass: 'typingjs__caret',
  ignoreContent: false,
  ignorePrefix: false,
  typeDelay: 50,
  sentenceDelay: 750,
  humanize: true,
});

5. Callback functions available.

$('p').typing({
  onType: undefined,
  onBackspace: undefined,
  onFinish: undefined,
  onSentenceFinish: undefined
});

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