e-typewriter
v1.0.5
Published
Typewriter Effect
Downloads
7
Maintainers
Readme
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.
