Simple Fast Text Typing Animation In JavaScript/jQuery - Typing.js
| File Size: | 17.7 KB |
|---|---|
| Views Total: | 5510 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











