Print Text Line-by-line With Typing Effect - jQuery TypeWriter

Print Text Line-by-line With Typing Effect - jQuery TypeWriter
File Size: 3.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Yet another jQuery text animation plugin which prints text line-by-line with a typing animation similar to the typewriter and terminal.

How to use it:

1. Create a container in which you want to print the strings.

<section id="typeWriter"></section>

2. Add jQuery library and the JavaScript file typeWriter.js to the webpage.

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

3. Initialize the jQuery TypeWriter plugin.

var typeWriter = new TypeWriter('#typeWriter');

4. Star typing the default strings.


5. Style the TypeWriter plugin in the CSS.

#typeWriter {
  width: 100%;
  height: 100%;
  color: #33d011;
  background: #222;
  font-family: 'VT323', courier;
  padding-left: 30px;
  padding-top: 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

#typeWriter span {
  display: block;
  font-size: 20px;
  letter-spacing: 2px;

#typeWriter :last-child::after {
  content: '_';
  display: inline-block;
  animation: blink 1s step-end infinite;

#typeWriter #init::after { display: none; }

#typeWriter span.typewriter-item::before {
  content: '>';
  display: inline-block;
  margin-right: 10px;

blink {  from, to {
 opacity: 0;
 50% {
 opacity: 1;

6. Override the default strings to type out.

this.linesToDisplay = [
    'Welcome on jQuery TypeWriter.',
    'You know what ?',
    'You can easily configure the TypeWriter by editing TypeWriter attributes in the source file.',
    'Try pressing the Enter key.'

7. More default settings.

this.firstDelay = 2000;
this.typingDelay = 70;
this.afterLineDelay = 1000;
this.endTimeOut = 2000;
this.endText = "Fake loading on progress...";

This awesome jQuery plugin is developed by alexandregros. For more Advanced Usages, please check the demo page or visit the official website.