Shuffling text effect

Shuffling text effect, is the simple shuffle text js. Here is the scripts and demos.

<span id="shuffle">SHUFFLING TEXT</span>

<script type="text/javascript">

// <![CDATA[
var speed=200; // speed, lower is faster
var alink="http://ashprincesskawaii.blogspot.co.id"; // place to link to
                                     // set to alink="" if not required
var shuffl, shftxt, c1, c2;
var shfpos=new Array();
window.onload=function() { if (document.getElementById) {
  var sorpos=new Array();
  var shft1, shft2;
  shuffl=document.getElementById("shuffle");
  if (!document.all) shuffl.style.position="relative"; // ie bug fix
  shftxt=shuffl.firstChild.nodeValue;
  shftxt=shftxt.replace(/ /g, String.fromCharCode(160));
  while (shuffl.childNodes.length) shuffl.removeChild(shuffl.childNodes[0]);
  for (var i=0; i<shftxt.length; i++) {
    shft1=document.createElement("span");
    shft1.setAttribute("id", "shuf"+i);
    shft1.style.position="relative";
    shft1.appendChild(document.createTextNode(shftxt.charAt(i)));
    if (alink) {
      shft1.onclick=function() { top.location.href=alink };
      shft1.style.cursor="pointer";
    }
    shuffl.appendChild(shft1);
  }
  sorpos[-1]=0;
  for (i=0; i<shftxt.length; i++) {
    shfpos[i]=i;
    sorpos[i]=sorpos[i-1]+getElWidth(document.getElementById("shuf"+i));
  }
  for (i=0; i<shftxt.length; i++) {
    shft2=Math.floor(Math.random()*(shftxt.length));
    shft1=shfpos[i];
    shfpos[i]=shfpos[shft2];
    shfpos[shft2]=shft1;
  }
  shft1=0;
  for (i=0; i<shftxt.length; i++) {
    shft2=document.getElementById("shuf"+shfpos[i]);
    shft2.style.left=shft1-sorpos[shfpos[i]-1]+"px";
    shft1+=getElWidth(shft2);
  }
  unshuffle();
}}

function unshuffle() {
  var shft1, shft2, rpos, go=0;
  for (var i=0; i<shftxt.length; i++) if (shfpos[i]!=i) go++;
  if (go) {
    do {
      rpos=Math.floor(Math.random()*(shftxt.length-1));
      shft1=shfpos[rpos];
      shft2=shfpos[rpos+1];
    } while (shft1<shft2);
    shfpos[rpos+1]=shft1;
    shfpos[rpos]=shft2;
    c1=document.getElementById("shuf"+shft1);
    shft1=getElWidth(c1);
    c2=document.getElementById("shuf"+shft2);
    shft2=getElWidth(c2);
    for (i=0; i<shft2; i++) setTimeout('c1.style.left=(parseInt(c1.style.left)+1)+"px"', speed/shft2*i);
    for (i=0; i<shft1; i++) setTimeout('c2.style.left=(parseInt(c2.style.left)-1)+"px"', speed/shft1*i);
    setTimeout('unshuffle()', speed);
  }
}

function getElWidth(el) {
  if (el.style.width) return parseInt(el.style.width);
  else if (el.offsetWidth) return el.offsetWidth;
  else if (el.clientWidth) return el.clientWidth;
  else return false;
}
// ]]>
</script>

See the Pen Shuffling text effect by Erna Ayuning Nareswari (@ashavenger) on CodePen.