Terminal Style Text Animation In Pure JavaScript – typing.js

Preview:

Description:

typing.js is a super tiny JavaScript library for emulating an user typing some text on the Terminal.

Basic usage:

Include the typing.js script file anywhere on the webpage.

<script src="typing.js"></script>

Include the text-cursor.css stylesheet for the Terminal style cursor.

<link rel="stylesheet" href="text-cursor.css">

Add text you want to type in the screen.

<p id="line1" class="hidden">Your mission, should you choose to accept it:</p>
<p id="line2" class="hidden">Use your JavaScript coding knowledge.</p>
<p id="line3" class="hidden">Finish this challenge!</p>
<p id="cursor-line" class="visible">&gt;&gt; <span class="typed-cursor">&#9608;</span></p>

Set typing speed and wait times.

var timeInit = 1000;     // initial wait before typing first line
var timeGap = 1000;      // wait time between each line
var timeChar = 40;       // time until next letter