Jquery Text Shuffle Effect Script

Simple Jquery script which allows letter or text animation with a shuffling effect.

Features

Can create dynamic letter animation effects on web pages using Jquery.
Users can customize the duration of the effect or the animation in the loop which shuffles the letter randomly.

Preview

Shuffling Text Effect

click shuffle button to animate letters

Downloads

<!DOCTYPE>
<html><head><title>Shuffling Text Effect</title><script src="http://hscripts.com/jquery.js"></script><script type="text/javascript">var offcur=new Array();var lwidth;var calwidth=0;var orig=new Array();var setinitial;var animate_duration=1500;// edit to adjust the shuffling time of the text/* Ready Function*/$(document).ready(function(){var stext=$("#sresult").text();var stext1=stext.split("");var totoffset=$("#sresult").offset();for(var i=0;i<stext1.length;i++){offcur[i]=i;orig[i]=i;}$("#sresult").html('');for(var i=0;i<stext1.length;i++){if(stext1[i]==' '){stext1[i]=" ";}$('#test').append('<div class=textdiv id="dd' + i + '"style=left:'+calwidth+'px;font-size:20px">' + stext1[i] + '</div>');lwidth=$('#dd'+i).width();calwidth+=lwidth;}var sds = document.getElementById("dum");if(sds == null){alert("You are using a free package.\n You are not allowed to remove the copyright.\n");}var sdss = document.getElementById("dumdiv");if(sdss == null){alert("You are using a free package.\n You are not allowed to remove the copyright.\n");}if(sdss != null){$('#reset').click(function(){if(check==true){setinitial=0;}for(var original=0;original<orig.length;original++){$("#dd"+orig[original]).animate({'left':setinitial+"px"},animate_duration);lwidth=$('#dd'+orig[original]).width();setinitial+=lwidth;}});$('#submit').click(function(){randomizearray(offcur);var calwidth=0;for(var d=0;d<offcur.length;d++){$("#dd"+offcur[d]).animate({'left':calwidth+"px"},animate_duration);lwidth=$('#dd'+offcur[d]).width();calwidth+=lwidth;}check=true;})}});
/* Ready function Ends*//* random function*/function randomizearray ( passarray ) {var i = passarray.length, j, tempi, tempj;if ( i == 0 ){}while ( --i ) {j = Math.floor( Math.random() * ( i + 1 ) );tempi = passarray[i];tempj = passarray[j];passarray[i] = tempj;passarray[j] = tempi;}}/*random function ends*/
</script>
<style>
.textdiv{position:absolute;color:#0B0B61;margin-left:35%;margin-top:50px;font-size: 24px;font-size:24px;font-family:Century Gothic;font-style:italic}#sresult{display:none;font-size:24px;font-family:Century Gothic;font-style:italic}#submit,#reset{cursor:pointer;}
</style>
</head>
<body><div id="textcontainer"><div align=center><b>Shuffling Text Effect</b></div><div id='sresult'>click shuffle button to animate letters</div><center><div id="outcontent"><div id="test"></div></div></center><br /><div style="padding-top:100px;"><center><input type="button" id="submit" value="Shuffle"> <input type="button" id="reset" value="Reset" ></center></div></div><div align=center style=" font-size: 10px;color: #dadada;" id="dumdiv"><a href="http://www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: green;">©h</a></div>

</body>
</html>

Release Date - 23-04-2014
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Copy paste the Jquery Shuffling Text Script in your webpage.
Now run the file in your browser to view the functionality of the script.
You can change the sentences for which you want to animate the changing effects.

License

This Jquery code is given under GPL License
i.e. Free use for those who use the codes as it is.
Free, if your modification does not remove our copyright information and links.
Detailed License information can be found here.
You can purchase the script if your requirements does not meet our GPL License terms.