BUBBLING TEXT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+.
12-Jan-2006
: Internet Explorer 4 support removed. Made XML compliant
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 bgcolour="#ffffff"; // background colour var fgcolour="#663399"; // foreground colour var speed=100; // speed of bubbling, lower is faster var shades=10; // number of shades of bubble /**************************** * Bubbling Text Effect * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var bubbcol=new Array(); var bubbler, bubbtxt; var bubbchr=new Array(); window.onload=function() { if (document.getElementById) { for (bubbler=0; bubbler<=shades; bubbler++) { bubbtxt="#"; for (var i=1; i<6; i+=2) { var bg=parseInt(bgcolour.substring(i,i+2),16); bubbtxt+=dechex(Math.floor(bg+(parseInt(fgcolour.substring(i,i+2),16)-bg)*(bubbler/shades))); } bubbcol[bubbler+1]=bubbtxt; } bubbler=document.getElementById("bubble"); bubbtxt=bubbler.firstChild.nodeValue; while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]); for (var i=0; i<bubbtxt.length; i++) { var bubbi=document.createElement("span"); bubbi.setAttribute("id", "bubb"+i); bubbi.appendChild(document.createTextNode(bubbtxt.charAt(i))); bubbler.appendChild(bubbi); } bubbler=setInterval ("bubbling()", speed); }} function dechex(dec) { var hex=dec.toString(16); if (dec<16) return "0"+hex; else return hex; } function bubbling() { for (var i=0; i<bubbtxt.length; i++) { var bubbme=document.getElementById("bubb"+i); if (bubbchr[i]) { bubbme.style.color=bubbcol[bubbchr[i]]; bubbchr[i]=(bubbchr[i]+1)%bubbcol.length; } else if (Math.random()<0.75/bubbchr.length) bubbchr[i]=1; } } // ]]> </script>
CLICK HERE
to select all the above text
STEP 2:
Change the colours at the start of the script you just copied to reflect the background and foreground colours of your web-page. Only use the format '#ffffff' and not 'white' or 'rgb(255, 255, 255)'.
STEP 3:
Place a <span> element with 'id="bubble"' on your web-page containing the text you wish to go all bubbly. For example:
Don't
include anything other than text between the <span> tags.
THAT'S IT
When your page loads, the text you placed between between the <span> tags should be turned all bubbly, 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!
Interested in learning more about JavaScript, CSS, HTML/XHTML/XML and PHP programming? I would highly recommend the following books...
[ This page viewed 3875 times. Last viewed Sun 20 Jul, 2008 at 07:11 ]
