If you want creating a dynamic typing animation that looks like the text is being typed by a typewriter then typer.js is the right solution for you:
It is written in native JavaScript (ES6) and works with almost no 3rd-party dependencies.
How to Use It
Follow the steps:
Step 1: Include Typer.js library file by placing at the bottom of your HTML file.
<script async src="https://unpkg.com/typer-dot-js@0.1.0/typer.js"></script>
Step 2: Create an empty span element with the CSS class of typer , an id of main-typer and define an array of words in the data-words attribute:
<span class="typer" id="main-typer" data-words="Software Engineer, Front-end Developer,Designer" data-delay="100"></span>
You can also customize the typing delay, default is 200.
Step 3: Add the following after your typer span to create a cursor. Make sure to add id="main-typer" to the typer as well, or else cursor won’t know who to listen to.
<span class="cursor" data-owner="main-typer"></span>
That’s it. Here’s an example typer.js to get you started:
Example – 1 (Typing Effect – Typer.js)
See the Pen Typing Effect – Typer.js Example -1 by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
Example – 2 (Using data-loop to stop on last word)
See the Pen Typing Effect – Typer.js (Using data-loop to stop on last word) Example -2 by Sunil Pradhan (@Sunil_Pradhan) on CodePen.
Other Famous JavaScript Libraries For Animated Typing Effect
- Typed.js – Live Demo (JS & NPM)
- Typewriterjs (JS & NPM)
- iTyped (JS & NPM) – Live Demo
- TinyTyper (Terminal Style) – JS & NPM – Live Demo
- typeinit (JS) – Live Demo
- Typer.js (Minimal code) Js – Live Demo
- typer (NPM) Js based
- jquery.typer.js (jquery) – Live Demo
- jQuery typer.js (Minimal code – jquery ) – Live Demo
- jquery.typist (jquery) – Live Demo
- Simple Typing(JS) – Live Demo
- TheaterJS (Js) – Live Demo
- FancyInput (jquery) – Live Demo
- React Typist (Good for React) – Live Demo
- Typetype (Terminal Style) jquery – Live Demo
- Typing Carousel Effect – Live Demo
Add comment