/** * @name Shuffle Letters * @author Martin Angelov * @version 1.0 * @url http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/ * @license MIT License */ (function($){ $.fn.shuffleLetters = function(prop){ var options = $.extend({ "step" : 8, // How many times should the letters be changed "fps" : 25, // Frames Per Second "text" : "", // Use this text instead of the contents "callback" : function(){} // Run once the animation is complete },prop) return this.each(function(){ var el = $(this), str = ""; // Preventing parallel animations using a flag; if(el.data('animated')){ return true; } el.data('animated',true); if(options.text) { str = options.text.split(''); } else { str = el.text().split(''); } // The types array holds the type for each character; // Letters holds the positions of non-space characters; var types = [], letters = []; // Looping through all the chars of the string for(var i=0;ilen){ // The animation is complete. Updating the // flag and triggering the callback; el.data('animated',false); options.callback(el); return; } // All the work gets done here for(i=Math.max(start,0); i < len; i++){ // The start argument and options.step limit // the characters we will be working on at once if( i < start+options.step){ // Generate a random character at thsi position strCopy[letters[i]] = randomChar(types[letters[i]]); } else { strCopy[letters[i]] = ""; } } el.text(strCopy.join("")); setTimeout(function(){ shuffle(start+1); },1000/options.fps); })(-options.step); }); }; function randomChar(type){ var pool = ""; if (type == "lowerLetter"){ pool = "abcdefghijklmnopqrstuvwxyz0123456789"; } else if (type == "upperLetter"){ pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; } else if (type == "symbol"){ pool = ",.?/\\(^)![]{}*&^%$#'\""; } var arr = pool.split(''); return arr[Math.floor(Math.random()*arr.length)]; } })(jQuery);