Menu

Javascript Typewriter Effect

Most video games, RPG's especially, use a typewriter effect for their text in game. This breaks up the monotony and allows you to read as the text fills the speech bubble.

Well today, we are going to do that on a webpage! For small texts and headers, this can be a super cool effect. Wouldn't recommend it for body text though! Lets get started.



To start out, lets think about what we have to do here. Essentially what we want to do here is take every individual character in a string and output it individually onto the screen.  It is as simple as that!

Well, that sounds simple, but we have to do a couple little tricks to get it going.

First thing we need is something to hold the text we want to output to the screen. In JavaScript, you can select an HTML element by its unique ID or Class. By selecting one, we can append additional HTML elements, change the text inside, or even change the appearance of the element!

For today all we are going to do is change inner element text. Go ahead and create the text holder element, in this case I will use a header tag.

<h1 id="elementToEdit"></h1>

As you can see, it has a unique ID to select it by.  Now, lets get into some JavaScript! First thing first, we will create the script tags . Once that is done, we need to create some variables to hold our text and how fast we want the 'typewriter' to output.

var i = 0;
var text = "Whatever text we want."; var speed = 50;

Now for the fun part! Lets create a function that will cycle through our string and give us the effect we want.

function typeWrite() {
{

Now, we need something to loop through our string and output it. We can achieve this with a simple if statement.

 if (i < text.length) {
}

What this does is check to see if the value of i is less than the text variable length. Now, inside of our if statement here we are going to select our element from above.

document.getElementById("elementToEdit").innerHTML += txt.charAt(i);

So, from here we selected our h1 tag and specified its inner HTML. Then, we are adding the character (char) at the index of i in the string.  

We are done, right? Well, not quite. There are still a couple of important steps to this. You see, i is set to zero. We need to increment this variable to get all of our letters out. Add this under where we selected the h1 tag.

i++;

Almost done. Now, we need to set the function to run run as fast as the machine can. Part of this effect is being able to see the text being printed to the screen. For this, we will use the setTimeout() function.

setTimeout(typeWrite, speed);

This function takes two parameters; the function to be executed and an integer for time. In our case, this will be our typeWrite() function and our speed variable.

Now, we need this to happen when the screen loads or another trigger is activated. For the sake or this tutorial, I am going to use the onload function to achieve this. Simply add:

onload=typeWrite();

This will cause the script to execute on a page load. 

And just like that, you are done! You should have a working script and a neat effect for your website! Add some 8-bit fonts to make it look really cool! Here is the final script:
 <script> 
var i = 0; 
var txt = 'text here'; 
var speed = 50; 
function typeWrite() { 
if (i < txt.length) { 
document.getElementById("demo").innerHTML += txt.charAt(i); 
i++; 
setTimeout(typeWriter, speed); 
} 
} 
onload=typeWriter();
</script>
     

Now wasn't that cool?  JavaScript can be cool at times!

Thanks for reading! Let us know what you thought in the comments below!

aribaa

Programmer, game designer, and gamer! I own and moderate the site, as well as post some of my creations. :3

aribaa

Programmer, game designer, and gamer! I own and moderate the site, as well as post some of my creations. :3

Like Us on Facebook!

Video of the day

Dragon Quest Builders Switch!