Jquery Text Shuffle Effect Script

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


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


Shuffling Text Effect

click shuffle button to animate letters


<!-- Script by hscripts.com -->
<!-- Copyright by Hscripts -->
<!-- More scripts @www.hscripts.com -->
<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]="&nbsp;";}$('#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*/
.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;}
<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;">&copy;h</a></div>


  • 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


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


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

Related Scripts

Jquery Download

Ask Questions

Ask Question