Simulate Typewriter Typing On The Screen – typing.js

Category: Animation , Javascript | January 3, 2018
Author: yat529
Views Total: 2,076
Official Page: Go to website
Last Update: January 3, 2018
License: MIT

Preview:

Simulate Typewriter Typing On The Screen – typing.js

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();

You Might Be Interested In:


Leave a Reply