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="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="typeWriter.js"></script>

3. Initialize the jQuery TypeWriter plugin.

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

4. Star typing the default strings.

typeWriter.start();

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;
}

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

6. Override the default strings to type out.

this.linesToDisplay = [
    'Hi.',
    '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.