js/jquery.shuffleLetters.js

   1 /**
   2  * @author              Martin Angelov
   3  * @license             MIT License
   4  */
   5
   6 (function($){
   7
   8         $.fn.shuffleLetters = function(prop){
   9
  10                 var options = $.extend({
  11                         "step"          : 12,
  12                         "fps"           : 75,
  13                         "text"          : "",                   // Use this text instead of the contents
  14                         "callback"      : function(){}  // Run once the animation is complete
  15                 },prop)
  16
  17                 return this.each(function(){
  18
  19                         var el = $(this),
  20                                 str = "";
  21
  22
  23                         // Preventing parallel animations using a flag;
  24
  25                         if(el.data('animated')){
  26                                 return true;
  27                         }
  28
  29                         el.data('animated',true);
  30
  31
  32                         if(options.text) {
  33                                 str = options.text.split('');
  34                         }
  35                         else {
  36                                 str = el.text().split('');
  37                         }
  38
  39                         // The types array holds the type for each character;
  40                         // Letters holds the positions of non-space characters;
  41
  42                         var types = [],
  43                                 letters = [];
  44
  45                         // Looping through all the chars of the string
  46
  47                         for(var i=0;i<str.length;i++){
  48
  49                                 var ch = str[i];
  50
  51                                 if(ch == " "){
  52                                         types[i] = "space";
  53                                         continue;
  54                                 }
  55                                 else if(/[a-z]/.test(ch)){
  56                                         types[i] = "lowerLetter";
  57                                 }
  58                                 else if(/[A-Z]/.test(ch)){
  59                                         types[i] = "upperLetter";
  60                                 }
  61                                 else {
  62                                         types[i] = "symbol";
  63                                 }
  64
  65                                 letters.push(i);
  66                         }
  67
  68                         el.html("");
  69
  70                         // Self executing named function expression:
  71
  72                         (function shuffle(start){
  73
  74                                 // This code is run options.fps times per second
  75                                 // and updates the contents of the page element
  76
  77                                 var i,
  78                                         len = letters.length,
  79                                         strCopy = str.slice(0); // Fresh copy of the string
  80
  81                                 if(start>len){
  82
  83                                         // The animation is complete. Updating the
  84                                         // flag and triggering the callback;
  85
  86                                         el.data('animated',false);
  87                                         options.callback(el);
  88                                         return;
  89                                 }
  90
  91                                 // All the work gets done here
  92                                 for(i=Math.max(start,0); i < len; i++){
  93
  94                                         // The start argument and options.step limit
  95                                         // the characters we will be working on at once
  96
  97                                         if( i < start+options.step){
  98                                                 // Generate a random character at thsi position
  99                                                 strCopy[letters[i]] = randomChar(types[letters[i]]);
 100                                         }
 101                                         else {
 102                                                 strCopy[letters[i]] = "";
 103                                         }
 104                                 }
 105
 106                                 el.text(strCopy.join(""));
 107
 108                                 setTimeout(function(){
 109
 110                                         shuffle(start+1);
 111
 112                                 },1000/options.fps);
 113
 114                         })(-options.step);
 115
 116
 117                 });
 118         };
 119
 120         function randomChar(type){
 121                 var pool = "";
 122
 123                 if (type == "lowerLetter"){
 124                         pool = "0123456789abcdef";
 125                 }
 126                 else if (type == "upperLetter"){
 127                         pool = "0123456789ABCDEF";
 128                 }
 129                 else if (type == "symbol"){
 130                         pool = "xX";
 131                 }
 132
 133                 var arr = pool.split('');
 134                 return arr[Math.floor(Math.random()*arr.length)];
 135         }
 136
 137 })(jQuery);