Simulate Typewriter Typing On The Screen – typing.js

Preview:

Description:

typing.js is a vanilla JavaScript plugin used to simulate Typewriter typing and erasing effects on the screen. Supports multi-line text typing and custom font styles.

How to use it:

Insert the typing.css and typing.js into the document.

<link rel="stylesheet" href="typing.css">
<script src="typing.js"></script>

Create a container in which you want to output the text.

<div id="demo"></div>

Initialize the typing.js and we’re ready to go.

• selector: target container.
• speed: typing speed in milliseconds.
• initialdelay: initial delay in milliseconds.

// selector, speed, initialDelay
_$("demo", 100, 800)

API.

• type(string, option): type strings
• wait(): time before typing
• speed(): typing speed
• lineBreak(): add a linebreak
• delete(string, option): delete strings

_$("demo", 100, 800)
  .type("Hello! ").wait(1000).speed(100)
  .type("This is ").wait(300).speed(100)
  .lineBreak()
  .type("Typing Javascript", { 
      fontWeight: "bold", 
      color: "black",
  }).speed(40)
  .delete("Javascript").wait(1000).speed(200)
  .type("JS", { 
      fontWeight: "bold", 
      color: "black",
  }).wait(1000)
  .lineBreak();