Typing effect completely configurable in HTML
Live page:http://steven.codes/typerjs
<h1>
I love
<spanclass= "typer"id= "first-typer"data-words= "beets,bears,battlestar galactica"data-colors= "#cd2032,#cc1e81,#6e6abb"></span>
<spanclass= "cursor"data-owner= "first-typer"></span>
</h1>
<scriptasyncsrc= "https://unpkg /[email protected]/typer.js"></script>Never touch the JavaScript if you don't want to.
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 thedocs
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 theasync
attribute to your script tag, so that the browser resumes parsing your HTML file
while it fetches Typer.js!