Random Letter Effect

index.html

<div id="output"></div>

Random Letter Effect.markdown

Random Letter Effect

Forked from brandonisgreen's Pen Random Letter Effect.

Forked from brandonisgreen's Pen Random Letter Effect.

A Pen by Captain Anonymous on CodePen.

License.

script.js

$(document).ready(function(){
var theLetters = "abcdefghijklmnopqrstuvwxyz#%&^+=-"; //You can customize what letters it will cycle through
var ctnt = "DeFrost"; // Your text goes here
var speed = 50; // ms per frame
var increment = 8; // frames per step. Must be >2

    
var clen = ctnt.length;       
var si = 0;
var stri = 0;
var block = "";
var fixed = "";
//Call self x times, whole function wrapped in setTimeout
(function rustle (i) {          
setTimeout(function () {
  if (--i){rustle(i);}
  nextFrame(i);
  si = si + 1;        
}, speed);
})(clen*increment+1); 
function nextFrame(pos){
  for (var i=0; i<clen-stri; i++) {
    //Random number
    var num = Math.floor(theLetters.length * Math.random());
    //Get random letter
    var letter = theLetters.charAt(num);
    block = block + letter;
  }
  if (si == (increment-1)){
    stri++;
  }
  if (si == increment){
  // Add a letter; 
  // every speed*10 ms
  fixed = fixed +  ctnt.charAt(stri - 1);
  si = 0;
  }
  $("#output").html(fixed + block);
  block = "";
}
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html,body{
  font-family:sans-serif;
  background-color:#white;
}
#output{
  /* The command I know best. */
  text-transform:uppercase;
  color:#black;
  font-size:6em;
  font-weight:bold;
  text-align:left;
}