CMD and TypeWriter Effect with jquery

We can play with our HTML elements with the help of JavaScript. Fortunately now we have some very easy ways to do so. yes i am talking about jquery.

Visited (this page) and you will see the CMD and TypeWritter Effect. Thats an intro with typing some Dos commands. Aftter that a page loads(comingsoon.html) in the same and changes the background color of page.


The TypeWritter function

The typewritter function simply runs after a period(Its a recursive function) and prints chars one by one. here is the function.

function typewriter(el,text,pos,no){
  ctext=text.substring(0,pos)+(pos%2?'_':'<blink>_</blink>');
  $(el).html(ctext);
  if(pos==text.length){
   $(el).html(text+"<blink>_</blink>");
   }
  else
   window.setTimeout('typwriter("'+el+'","'+text+'",'+(pos+1)+','+1+');',800);
 }

simply call it like this -

typewriter('#slide-client',"We are coming soon!!^Z ",0);

slide-client is id of the element where you have to show this effect.


Applying the CMD effect
That was the coolest thing in that design and most simple too. simply set the page background to black with the help of body's bgcolor property. Customize typewriter function according to your contents.
here is an example.

function typwriter(el,text,pos,no){
  ctext=text.substring(0,pos)+(pos%2?'_':'<blink>_</blink>');
  $(el).html(ctext);

if(pos==22){
$(el).html("We are coming soon!!^Z<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1 file(s) copied.<br />
<br />HTTP:\\motyar.com><span id=\"slide-client2\"><blink>
_</blink></span>");
typwriter('#slide-client2',"index.html ",0,2);
}
else
  if(pos==text.length){
   $(el).html(text+"<blink>_</blink>");
   if(text=="index.html "){ 
   $(document.body).css( "background-color", "white" )
   $("#result").load("comingsoon.html");  };
    
   }
  else
   window.setTimeout('typwriter("'+el+'","'+text+'",'+(pos+1)+','+1+');',800);
 }

Its will change the background color to white and load the comingsoon.html page after typing all contents.

DEMO

You can see the working code here.