e-typewriter

1.0.5 • Public • Published

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.

Package Sidebar

Install

npm i e-typewriter

Weekly Downloads

1

Version

1.0.5

License

ISC

Unpacked Size

9.12 kB

Total Files

3

Last publish

Collaborators

  • christopher_far