Well, I was kind of out-of-subject, so I thought of blogging on a simple, damn simple JavaScript program which shows up a typing effect.
After coding it, I just looked up some other methods of doing it. But, all of them took more than twenty lines of code. Mine takes up a measly 6-10 lines of code.
The Program uses a simple timing function, with a variable which is incremented every time the function is called. A function is timed and the timing is placed inside the same function, so that it gets called consecutively.
Let me show you how –
<html>
<head>
<title>Typing Effect - by Zillion</title>
<script type='text/javascript'>
var index = 0;
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt, nulla at tempus tristique, nisl leo molestie est, ut vestibulum mauris mauris a odio. Sed at massa vitae ipsum venenatis porta. Integer iaculis pretium tempus. Donec viverra sollicitudin velit non gravida. Phasellus sit amet tortor odio. Vivamus lectus nisl, suscipit porttitor bibendum ut, tristique quis dui. Vestibulum non eros leo. Maecenas tincidunt semper turpis, a tristique purus pretium sit amet. Praesent nec neque tortor.Donec suscipit tristique ante quis molestie. Phasellus ac lacus non felis faucibus dictum vitae ac ipsum. Sed pharetra nulla sodales nulla porta imperdiet. Quisque pretium hendrerit laoreet.';
// Here you can put in the text you want to make it type.
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);
// The time taken for each character here is 100ms. You can change it if you want.
}
</script>
</head>
<body onload='type()'>
<!-- And here, you create the container in which you display the typed text -->
<div id='screen'></div>
</body>
</html>
I also found out that this could be used to show HTML being typed out. Try this out with text='<html><h1>This typing effect is just great.</h1></html>’ or any other HTML code. This works with HTML and the browser does not show the executed code, because the browser tries to interpret HTML as one block, as a whole. But since this HTML code snippet is just added character-by-character, the code does not get executed.
Prince Mathew 
This helped me a lot!, planning to use it for a 404 page
Glad you liked it, Jordan.
– Prince
Glad to know that you liked it, James.
Prince
NICE!
How would you change the color/font type of the text?
Nice one! I saw 1 or 2 snippets to acomplish this but this one’s definitely simpler and it works. Cheers!
Hey, it was a really nice and simple feature to implement =) I plan to use it on my upcoming website! By the way, I made some changes so it has a blinking cursor, that way it seems like it’s being typed by a keyboard. If you want it, I cant share it! Cheers
I’m interested in this if you’d be willing to still share it. 🙂
Is there any way to add a carriage return prompt like \r to the text in the var text value?
can use href link into the text ?
Amazing! it work. but I have a question: how to make the typping effect in a textfield or in a textarea in html?
use css
Great script, thanks so much, very clean and simple. Echoing the question from just1randomguy, is there any way to insert carriage returns?
How can I put a line break, new paragraph in using this code? I have tried inserting \n but cant seem to get it
Hey there, is there a chance to use a string of arrays?
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);
// The time taken for each character here is 100ms. You can change it if you want.
}
document.addEventListener("load", function() {
var your_array = ["Text1", "Text2"];
for (var i = 0; your_array[i]; i++) type(your_array[i]);
});