Decrypting Text Effect

Include this JavaScript in your webpage and apply the decrypting text effect to a selected text string. (tested on IE6 and Firefox 1.0)

Example

Your text goes here.

Javascript installation

Step #1 - Copy this code into the head section of your web page.

<script>
var got;
var chars;

function change()
{
   var randstring = "";
   var rslength = chars.length - got.length;

   var decrypted = document.getElementById("decoded");
   var encrypted = document.getElementById("encoded");

   for(var x=0;x<rslength;x++)
   {
      i = Math.floor(Math.random() * chars.length);
      randstring += chars.charAt(i);
   }

   if(randstring.charAt(0) == chars.charAt(got.length))
   {
      got += randstring.charAt(0);
      decrypted.innerHTML = got;
   }
   else
   {
      encrypted.innerHTML = randstring;
   }

   if(chars.length > got.length)
   {
      setTimeout("change()", 10);
   }
   else
   {
      encrypted.innerHTML = "";
   }
}
function startdecrypt()
{
   var decrypted = document.getElementById("decoded");
   var encrypted = document.getElementById("encoded");

   chars = decrypted.innerHTML;
   decrypted.innerHTML = "";
   got = "";
   setTimeout("change()", 10);
}
</script>

Step #2 - Copy this code into the body section of your webpage and change the text to anything you want.

<span id="decoded">Your text goes here.</span><span id="encoded"></span>

Step #3 - Include a call to the start function to begin the decryption, this could be done with the onLoad event in the body tag.

<body onLoad="javascript:startdecrypt()">

Download Script