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
Top comments (1)
Thanks man