JS Typing Animation

index.html

<h1>Typing Animation</h1>

<p>
  <!-- In order for the curser to stay on the same line as the typing text, the typing text element must be inside of a  <p> tag  -->
  <span id="demo" class="typing cursor"></span>
</p>

js-typing-animation.markdown

JS Typing Animation

A Pen by Jamison on CodePen.

License.

script.js

window.addEventListener("load", () => {
  document.querySelector("#demo").innerHTML = "";
  let i = 0;
  let txt =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dapibus nibh. Aenean consectetur turpis eget leo laoreet, et porttitor orci hendrerit.";
  let speed = 50;
  type(txt, i, speed);
});

let type = (txt, i, speed) => {
  if (i < txt.length) {
    document.querySelector("#demo").classList.remove("typing");
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(() => {
      type(txt, i, speed);
    }, speed);
  } else {
    document.querySelector("#demo").classList.add("typing");
  }
};

style.css

body {
  background: #000;
}

div {
  margin: 0 auto 20px auto;
}

p {
  color: #fff;
  width: 400px;
  margin: 0 auto 0 auto;
}

.cursor {
  border-right: 0.2em solid #fff;
}

.typing {
  animation: blink-caret 0.75s step-end infinite;
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}