WOBBLY TEXT EFFECT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0+ and Opera 7+
29-Sep-2005
: Added the option for the text to be a link.
20-Aug-2005
: Removed support for Internet Explorer 4.
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=100; // speed of wobbling, lower is faster var height=3; // height of wobbling in pixels var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link) /**************************** * Wobbly Text Effect * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var wobtxt, wobble, wobcnt=0; window.onload=function() { if (document.getElementById) { var i, wobli; wobble=document.getElementById("wobble"); wobtxt=wobble.firstChild.nodeValue; while (wobble.childNodes.length) wobble.removeChild(wobble.childNodes[0]); for (i=0; i<wobtxt.length; i++) { wobli=document.createElement("span"); wobli.setAttribute("id", "wobb"+i); wobli.style.position="relative"; wobli.appendChild(document.createTextNode(wobtxt.charAt(i))); if (alink) { wobli.style.cursor="pointer"; wobli.onclick=function() { top.location.href=alink; } } wobble.appendChild(wobli); } setInterval("wobbler()", speed); }} function wobbler() { for (var i=0; i<wobtxt.length; i++) document.getElementById("wobb"+i).style.top=Math.round(height*Math.sin(i+wobcnt))+"px" wobcnt++; } // ]]> </script>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
Place a <div> element with 'id="wobble"' on your web-page containing the text you wish to go wobbly. For example:
Don't
include anything other than text between the <div> tags.
THAT'S IT
When your page loads, the text you placed between between the <div> tags should start wobbling, 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!
[ This page viewed 128 times. Last viewed Fri 30 Jul, 2010 at 10:46 ]
