Advertisement
tanaxmercedes

Bubbling Text Effect

Jan 1st, 2019
150
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.23 KB | None | 0 0
  1. PLACE IN EITHER THE <HEAD> OR <BODY> SECTION OF YOUR CODE.
  2.  
  3. <script type="text/javascript">
  4. // <![CDATA[
  5. var bgcolour="{color:BlinkingColorOne}"; // background colour
  6. var fgcolour="{color:BlinkingColorTwo}"; // #6600cc foreground colour
  7. var speed=80; // speed of bubbling, lower is faster
  8. var shades=12; // number of shades of bubble
  9.  
  10. /****************************
  11. * Bubbling Text Effect *
  12. *(c)2003-13 mf2fm web-design*
  13. * http://www.mf2fm.com/rv *
  14. * DON'T EDIT BELOW THIS BOX *
  15. ****************************/
  16. var bubbcol=new Array();
  17. var bubbshd;
  18. var bubbler, bubbtxt;
  19. var bubbchr=new Array();
  20.  
  21. function addLoadEvent(funky) {
  22. var oldonload=window.onload;
  23. if (typeof(oldonload)!='function') window.onload=funky;
  24. else window.onload=function() {
  25. if (oldonload) oldonload();
  26. funky();
  27. }
  28. }
  29.  
  30. addLoadEvent(bubbagump);
  31.  
  32. function bubbagump() { if (document.getElementById) {
  33. var i, fg, bg, col;
  34. for (bubbler=0; bubbler<=shades; bubbler++) {
  35. col="#";
  36. for (i=1; i<6; i+=2) {
  37. bg=parseInt(bgcolour.substring(i,i+2),16);
  38. fg=parseInt(fgcolour.substring(i,i+2),16);
  39. col+=dechex(bg+(fg-bg)*(bubbler/shades));
  40. }
  41. bubbcol[bubbler+1]=col;
  42. if (bubbler==Math.floor(shades/2)) bubbshd=col;
  43. }
  44. bubbler=document.getElementById("bubble");
  45. bubbtxt=bubbler.firstChild.nodeValue;
  46. while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]);
  47. for (i=0; i<bubbtxt.length; i++) {
  48. fg=document.createElement("span");
  49. fg.setAttribute("id", "bubb"+i);
  50. fg.style.textShadow=bubbshd+" 0px 0px 2px";
  51. fg.appendChild(document.createTextNode(bubbtxt.charAt(i)));
  52. bubbler.appendChild(fg);
  53. }
  54. bubbler=setInterval("bubbling()", speed);
  55. }}
  56.  
  57. function dechex(dec) {
  58. dec=Math.floor(dec);
  59. return ((dec<16)?'0':'')+dec.toString(16);
  60. }
  61.  
  62. function bubbling() {
  63. var i, bubby;
  64. for (i=0; i<bubbtxt.length; i++) {
  65. bubby=document.getElementById("bubb"+i);
  66. if (bubbchr[i]) {
  67. bubby.style.color=bubbcol[bubbchr[i]];
  68. bubbchr[i]=(bubbchr[i]+1)%bubbcol.length;
  69. }
  70. else if (Math.random()<7.5/(shades*bubbtxt.length)) bubbchr[i]=1;
  71. }
  72. }
  73. // ]]>
  74. </script>
  75.  
  76.  
  77. PLACE THIS IN THE BODY SECTION.
  78.  
  79. <span id="bubble"> TEXT YOU WANT TO BUBBLE </span>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement