typewrite.js
Typewritejs is a tiny library for revealing text in a typewriter styled manner.
Source
Download
// Instantiate typewrite on any element(s).
let x = new typeWrite(".someselector");
Installation
To use typewrite,download the latest release and include it in your markup.
Basic Usage
With typewrite installed, getting started is as simple as calling typewrite() with some DOM elements. Those elements should form of a CSS selector because typewrite uses .querySelector()
With typewrite instantiated you can start your instance with the start() method or reverse it with the .reverse() method.
// Start typewrite on any element(s).
x.start();
// reverse the current text
//the reverse method accepts a function and calls it after the reverse is done.
var callback = function(){
console.log('reverse done :)');
}
x.reverse(callback);
Options
An options object can be passed to typewrite when instantiated.
let x = new typeWrite(".someselector",{
speed: 500, //speed in milliseconds, default : 100ms
separator: ' ', //character or string to enter between characters, default: ' '
texts: ['hey', 'what\'s popping ?'], //an array of texts, default : the current text of the element
loop: true, //keep going on and on, default: false
reverseDelay: 500, //milliseconds to wait before reversing when cycling through texts, default : the initial speed
cursor: '|', //the cursor (duh), default: the Pipe "|" character,
waitOnChar: ',', //character to delay on after typing this
waitOnCharDuration: 100, //wait on Character Detect Delay in milliseconds, default : 0ms,
randWaitOnChar:false, //generates a number between 0 and waitOnCharDuration as waitOnCharDuration. default: false
});
Wait On Character
v2+.
TypeWrite can be delayed on character detect for a more human like typing effect.
Here we'll be waiting for a Maximum duration of 900ms after every comma key.
You Could set this to delay after typing every "a" or every empty space " " character.
Events
typeDone
Fires after a piece text has been written completely.
document.getElementById("selector").addEventListener("typeDone", function(){
alert('typeDone')
});
reverse
Fires after a piece text has been reversed.
document.getElementById("selector").addEventListener("reverse", function(){
alert('this text has been reversed')
});
Methods
.start()
Start typewriting.
.stop(callback)
Stop typewriting.
.pause(3000,callback)
Pause typewriting for 3 seconds.
.resume(callback)
Resume typewriting after pausing.
.changeOption(option,value)
Change an option to a value e.g x.changeOption('speed',2000);.