1.0.5 • Published 2 years ago

e-typewriter v1.0.5

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

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 1. An element from the document which supports innerHTML method and has an id, to display the message. (required) 2. The total time in ms, that the effect will be completed. (optional) 3. Font-family. (optional) 4. Font-size (px, em, rem, %, vw, calc(vw+vh)). All units are accepted. (optional) 5. Text color. ("black", hex color, hsla, rgba). All values are accepted. (optional) 6. Caret color. ("black", hex color, hsla, rgba). All values are accepted. (optional) 7. Caret size. Default size is 1. Accepts a number. For example 2, 1.3.. (optional) 8. 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.

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago