TypeWriting.js : JavaScript Library for Typewriter Effect

TypeWriting.js

If you want to make the typing effect, this is what you need.

TypeWriting DEMO

Note: TypeWriting.js doesn't depend on jQuery since version 1.2. If you want to keep the old version, please check another branch - jQuery-v1.1.3.

Installation

Just clone or download the zip of this repository

or via npm:

$ yarn add typewriting  # $ npm install --save typewriting

Setup

<!-- just typewriting.js or .min.js --> <script src='path/to/typewriting.min.js'></script>

or

// import in your .js file import TypeWriting from 'typewriting';

TypeWriting()

• targetElement: HTML element required
  Your element
• inputString: String required
  Your text
• typingInterval: Int
  Interval between each character
• blinkInterval: String
  Interval of the cursor blinks
• cursorColor: String
  Color of the cursor

I use the height of targetElement to set the cursor height. You could use its line-height to control cursor height.

Second parameter is the function after typing effect.

const typeWriting = new TypeWriting({ 	targetElement   : document.getElementsByClassName('terminal')[0], 	inputString     : 'Hello, world.', 	typingInterval  : 130, 	blinkInterval   : '1s', 	cursorColor     : '#00fd55', }, () => console.log('END'));

rewrite()

You could use this function to do the same effect but different text at same element.

typeWriting.rewrite('Welcome to TypeWriting.js', () => { 	console.log('Rewrite() is finished'); });