Making Type effect using pure javascript

If You are reading this then u might be Having Basic math and javascript knowledge so here i am going to teach you how to make a simple typewriter effect using pure javascript no external libraries.

so lets get started with it
lets first make the element we want to add the effect/animation to

<h1 id="type"></h1>

here i am using a <h1> tag with a id="type"
now lets get to the javascript code first we define our variables

var i = 0 //no of words which will be 0 at first
var txt = "the text u want to display" 
var speed = 50 // try changing this to experiment ;)

now lets get real here

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("type").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

now let me tell you what i did here we made it show the each character at the speed we feeded until the final length is satisfied which makes our type effect :)
now we call the function when we want to run it you can call in many ways but some simple ones are onclick or onload
here is how i used it

<body onload="typeWriter()">
  <h1 id="type"></h1>
</body>

Here is a code for those who will skip all the above thing and just want the code

Blog

Making Type effect using pure javascript

Devster

Join Our Newsletter. No Spam, Only the good stuff.

Related