SHUFFLING TEXT EFFECT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
6-Oct-2005
: Re-written to use 'relative' positioning to simplify coding and improve performance. Also added ability for text to be a link.
5-Oct-2005
: Internet Explorer 4 support removed, updated for XML compatibility, and fixed a window resizing bug.
STEP 1:
Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page:
<script type="text/javascript"> // <![CDATA[ var speed=200; // speed, lower is faster var alink="http://www.mf2fm.com/rv"; // place to link to // set to alink="" if not required /***************************\ * Shuffle Text Effect * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \***************************/ 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>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
Place a <span> element with ' id="flirt" ' on your web-page containing the text you wish to have shuffled. For example:
Don't
include anything other than text between the <span> tags.
THAT'S IT
When your page loads, the text between your <span> tags should be scrambled and then shuffled back into the right order, like the text at the top of this page.
No menu on the left?
Click here
for a full list of all the free DHTML and Javascript effects you could be using on your web-site!
If you like my Text and Graphic Effects,
please rate them @
ScriptSearch.com
!
- Select -
Excellent!
Very Good
Good
Fair
Poor
[ This page viewed 79 times. Last viewed Fri 30 Jul, 2010 at 00:53 ]