Bubble Text Effect :: RV's free DHTML and JavaScript text and graphic scripts

BUBBLING TEXT EFFECT

This script has been tested on and shown to work with the following browsers: Internet Explorer version 5 and above Google Chrome version 1 and above Mozilla Firefox version 1 and above Apple Safari version 5 and above Opera version 7 and above (including Opera mobile) Android Browser version 1 and above

29-May-2013: Updated onload handler and added shadow around text. 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="#6600cc"; // foreground colour var speed=80; // speed of bubbling, lower is faster var shades=12; // number of shades of bubble /**************************** * Bubbling Text Effect * (c)2003-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var bubbcol=new Array(); var bubbshd; var bubbler, bubbtxt; var bubbchr=new Array(); function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(bubbagump); function bubbagump() { if (document.getElementById) { var i, fg, bg, col; for (bubbler=0; bubbler<=shades; bubbler++) { col="#"; for (i=1; i<6; i+=2) { bg=parseInt(bgcolour.substring(i,i+2),16); fg=parseInt(fgcolour.substring(i,i+2),16); col+=dechex(bg+(fg-bg)(bubbler/shades)); } bubbcol[bubbler+1]=col; if (bubbler==Math.floor(shades/2)) bubbshd=col; } bubbler=document.getElementById("bubble"); bubbtxt=bubbler.firstChild.nodeValue; while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]); for (i=0; i<bubbtxt.length; i++) { fg=document.createElement("span"); fg.setAttribute("id", "bubb"+i); fg.style.textShadow=bubbshd+" 0px 0px 2px"; fg.appendChild(document.createTextNode(bubbtxt.charAt(i))); bubbler.appendChild(fg); } bubbler=setInterval("bubbling()", speed); }} function dechex(dec) { dec=Math.floor(dec); return ((dec<16)?'0':'')+dec.toString(16); } function bubbling() { var i, bubby; for (i=0; i<bubbtxt.length; i++) { bubby=document.getElementById("bubb"+i); if (bubbchr[i]) { bubby.style.color=bubbcol[bubbchr[i]]; bubbchr[i]=(bubbchr[i]+1)%bubbcol.length; } else if (Math.random()<7.5/(shades*bubbtxt.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. This is one of the older scripts on this site, having been around since 2003 (over 10 years!) but is still one of the more popular. People must like the idea of having bubbly text on their web-sites.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlbubblegum.php.

This page has been viewed 236 times. It was last viewed on Sat 21 Dec, 2024 at 11:12