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

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

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.