Skip to content

Latest commit

 

History

History
36 lines (27 loc) · 1.07 KB

README.md

File metadata and controls

36 lines (27 loc) · 1.07 KB

Typer.js

Typing effect completely configurable in HTML

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

example gif of typing effect

<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!