JSFiddle - React, Tailwind, and code Playground

by Akshay U

HTML

<div class="container">

</div>

CSS

body{
  background:black;
}

span {
  font-family: "Courier New";
  font-size: 24px;
  color: #fff;
  font-weight: bold;
}

.azy-typer-blinker {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    color: crimson;
  }
  50% {
    color: transparent;
  }
  100% {
    color: crimson;
  }
}

.azy-typer-done{
  margin-left:24px;
}
.azy-typer-done:before{
  content:">>";
  color:lightgreen;
  font-family: "Courier New";
  font-size: 24px;
  margin-left:-24px;
  font-weight: bold;
}

JavaScript

typer = function(e, s, d, t) {
  var eI = 0;
  var speed = s;
  var delay = d;
  var eLength = t.length;
  var z = 1;
  function loop() {
    var p = $("<div class='azy-typer-container azy-typer-done'></div>");
    var c_t = $("<span class='azy-typer-element'></span>")
    var c_b = $("<span class='azy-typer-blinker'>|</span>");
    $(".azy-typer-blinker").remove();
    p.append(c_t).append(c_b);
    $(e).append(p);
    interval = setInterval(function() {
      c_t.text(t[eI].substring(0, z));
      if (z + 1 > t[eI].length) {
        clearInterval(interval);
        eI = eI + 1;
        if (eI + 1 <= t.length) {
        	z = 0;
        	setTimeout(loop,d);
        }
      } else {
        z = z + 1;
      }
    }, s)
  }
  loop();
}
new typer(".container", 100, 1000, ["Hi there!", "This is a typer demo ","What do you think about this ?"]);