Javascript Decrypting Text Effect

Include this JavaScript in your webpage and apply the decrypting text effect to a selected text string.

Example

Your text goes here.

Code Installation

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

JavaScript <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.

HTML <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.

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