RV's free DHTML and JavaScript text and graphic scripts

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(heightMath.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!

Link directly to this page: http://www.mf2fm.com/rv/dhtmlwobble.php

This page viewed 628 times. Last viewed Thu 17 May, 2012 at 16:36