Typewritter Effect
Accepts an element which supports innerHTML method, (no need for any style) with an id.
const TypeWriter = require("e-typewriter.js");
const typewriter = new TypeWriter(document.getElementById("message-container"));
Methods
typewriter.write(); or await typewriter.write();
typewriter.clear(); or await typewriter.clear();
typewriter.resetAll(); ////Stop the execution immediately. Clear all the timers.
typewriter.setData(); //Set the displayed message
TypeWriter constructor
new TypeWriter(el, time=4000, font="Verdana", fontSize="1em", textColor="hsla(240,100%,0%,100%)", caretColor="hsla(240,100%,0%,100%)", caretSize=1, deleteInterval=15);
Arguments
- An element from the document which supports innerHTML method and has an id, to display the message. (required)
- The total time in ms, that the effect will be completed. (optional)
- Font-family. (optional)
- Font-size (px, em, rem, %, vw, calc(vw+vh)). All units are accepted. (optional)
- Text color. ("black", hex color, hsla, rgba). All values are accepted. (optional)
- Caret color. ("black", hex color, hsla, rgba). All values are accepted. (optional)
- Caret size. Default size is 1. Accepts a number. For example 2, 1.3.. (optional)
- Interval time for deleting effect. (optional)
***Caret will dissapeared after time*2 seconds.
***Caret size affects the line-height. It is recommended to use values larger that "1" only in a sinle line text.
Usage
npm i type-writer
const TypeWriter = require("e-typewriter.js");
const container = document.getElementById("message-container");
const typewriter = new TypeWriter(container);
typewriter.setData("Hello World!");
typewriter.write();
OR in async mode
write();
async function write(){
const TypeWriter = require("e-typewriter.js");
const container = document.getElementById("message-container");
const typewriter = new TypeWriter(container);
typewriter.setData("Hello World!");
await typewriter.write();
typewriter.setData("How are you today?");
await typewriter.write();
await typewriter.clear();
}
Or you can include e-typewriter as a script. See example.