Author: | igor-stojcic |
---|---|
Views Total: | 381 views |
Official Page: | Go to website |
Last Update: | February 22, 2021 |
License: | MIT |
Preview:

Description:
AutoTyping.js is a vanilla JavaScript library that applies sequential text typing and deleting effects to an array of strings.
Use this library to create a text rotator that automatically rotates through any text with a typewriter-like character typing effect.
More Features:
- Configurable typing/deleting duration, delay, and speed.
- Custom blinking cursor.
- Infinite looping or not.
- Random interval between each character to simulate real human typing.
See Also:
How to use it:
1. Download the package and insert the AutoTyping.min.js
script into the HTML page.
<script src="dist/AutoTyping.min.js"></script>
2. Create a new AutoTyping instance, specify the target container in which the text will print out, and define an array of strings to be printed out as follows:
<h1 id="header"></h1>
const myheader = new AutoTyping({ id: 'header', typeText: ['AutoTyping.js Example', 'A Text Typing Effect'] })
3. Initialize the library to start the text typing effect.
myheader.init()
4. Customize the font color. Default: #000.
const myheader = new AutoTyping({ id: 'header', typeText: ['AutoTyping.js Example', 'A Text Typing Effect'], textColor: '#ff0000' })
5. Customize the text typing effect.
const myheader = new AutoTyping({ id: 'header', typeText: ['AutoTyping.js Example', 'A Text Typing Effect'], typeSpeed: 100, typeDelay: 100, typeRandom: false, deleteSpeed: 50, deleteDelay: 50, typeInfinity: true })
6. Customize the blinking cursor displaying at the end of the text while typing.
const myheader = new AutoTyping({ id: 'header', typeText: ['AutoTyping.js Example', 'A Text Typing Effect'], cursor: '|', cursorColor: '#000', cursorSpeed: 300 })
7. Available callback function that will be fired after every typing cycle.
const myheader = new AutoTyping({ id: 'header', typeText: ['AutoTyping.js Example', 'A Text Typing Effect'], callBack: { counter: 3, method: function(counter){ // do something } } })
8. Delete a text to a specific character, and type a new sequel.
const myheader = new AutoTyping({ id: 'header', typeText: ['AutoTyping.js Example', 'A Text Typing Effect'], textDeleteOptions: { 0: { //index of strings in "typeText" Array deleteToChar: 2, continueThis: "rld best" } } })
Changelog:
v1.2.6 (02/22/2021)
- Added textDeleteOptions option.