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:
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://email@example.com/typer.js"></script>
Step 2: Create an empty span element with the CSS class of
typer , an
main-typer and define an array of words in the
<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
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)
Example – 2 (Using data-loop to stop on last word)
- 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
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?