franklad/typer.js

Typing effect completely configurable in HTML.

Typer.js

Typing effect completely configurable in HTML

Live page: http://steven.codes/typerjs

<h1>
  I love
  <span class="typer" id="first-typer" data-words="beets,bears,battlestar galactica" data-colors="#cd2032,#cc1e81,#6e6abb"></span>
  <span class="cursor" data-owner="first-typer"></span>
</h1>
<script async src="https://unpkg.com/[email protected]/typer.js"></script>

Never touch the JavaScript if you don't want to.

Features

You're in control of:

• Keystroke delay and variance
• Time between deletion of words
• Cursor display
• Color of each word
• Pausing and playing the effect

Read more in the docs

Common bugs

Make sure to load the script after the final usage of Typer.js in your HTML. Due to how browsers parse HTML, a script is guaranteed access to all of the DOM elements that precede the script tag that loaded it. There's no harm in adding the async attribute to your script tag, so that the browser resumes parsing your HTML file while it fetches Typer.js!