Minimal Typing Effect Written In JavaScript ES6 – Typer.js

Preview:

Description:

Yet another lightweight solution for adding a simple but stylish typewriter typing effect to your page using HTML data attributes.

It is written in native JavaScript (ES 6) and works with no 3rd-party dependencies.

How to use it:

1. Download and import the Typer.js library.

<script src="typer.min.js"></script>

2. Create an empty span element with the CSS class of ‘typewrite’ and define an array of words in the data-words attribute:

<span class="typewrite" data-words='["CSS", "Script", "Com"]'></span>

3. Determine whether to loop the typing effect.

<span class="typewrite" data-words='["CSS", "Script", "Com"]' data-loop="yes" ></span>

4. Customize the typing speed. Default: 100.

<span class="typewrite" data-words='["CSS", "Script", "Com"]' data-speed="500"></span>

5. Set the time to wait before typing the next word. Default: 1000.

<span class="typewrite" data-words='["CSS", "Script", "Com"]' data-delay="1500"></span>