Advertisement
kyujouz

bg bubble

Nov 25th, 2021
577
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.25 KB | None | 0 0
  1. <script type="text/javascript">
  2. // <![CDATA[
  3. var colours=new Array("#ffbbd3", "#ffbbd3", "#ffbbd3", "#ffbbd3", "#fff"); // colours for top, right, bottom and left borders and background of bubbles
  4. var bubbles=100; // how many bubbles are moving at any given time
  5. var over_or_under="under"; // set to "over" for bubbles to always be on top, or "under" to allow them to float behind other objects
  6.  
  7. /****************************
  8. * JavaScript Bubble Bath *
  9. *(c)2010-13 mf2fm web-design*
  10. * http://www.mf2fm.com/rv *
  11. * DON'T EDIT BELOW THIS BOX *
  12. ****************************/
  13.  
  14. var swide=800;
  15. var shigh=600;
  16. var bubb=new Array();
  17. var bubbx=new Array();
  18. var bubby=new Array();
  19. var bubbs=new Array();
  20. var boddie;
  21. var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;
  22.  
  23. function addLoadEvent(funky) {
  24. var oldonload=window.onload;
  25. if (typeof(oldonload)!='function') window.onload=funky;
  26. else window.onload=function() {
  27. if (oldonload) oldonload();
  28. funky();
  29. }
  30. }
  31.  
  32. addLoadEvent(bubba);
  33.  
  34. function bubba() { if (document.getElementById) {
  35. var i, rats, div;
  36. boddie=document.createElement("div");
  37. boddie.style.position="fixed";
  38. boddie.style.top="0px";
  39. boddie.style.left="0px";
  40. boddie.style.overflow="visible";
  41. boddie.style.width="1px";
  42. boddie.style.height="1px";
  43. boddie.style.backgroundColor="transparent";
  44. boddie.style.zIndex="0";
  45. document.body.appendChild(boddie);
  46. set_width();
  47. for (i=0; i<bubbles; i++) {
  48. rats=createDiv("3px", "3px");
  49.  
  50. div=createDiv("auto", "auto");
  51. rats.appendChild(div);
  52. div=div.style;
  53. div.top="1px";
  54. div.left="0px";
  55. div.bottom="1px";
  56. div.right="0px";
  57. div.borderLeft="1px solid "+colours[3];
  58. div.borderRight="1px solid "+colours[1];
  59.  
  60. div=createDiv("auto", "auto");
  61. rats.appendChild(div);
  62. div=div.style;
  63. div.top="0px";
  64. div.left="1px";
  65. div.right="1px";
  66. div.bottom="0px"
  67. div.borderTop="1px solid "+colours[0];
  68. div.borderBottom="1px solid "+colours[2];
  69.  
  70. div=createDiv("auto", "auto");
  71. rats.appendChild(div);
  72. div=div.style;
  73. div.left="1px";
  74. div.right="1px";
  75. div.bottom="1px";
  76. div.top="1px";
  77. div.backgroundColor=colours[4];
  78. if (ie_version && ie_version<10) div.filter="alpha(opacity=50)";
  79. else div.opacity=0.5;
  80.  
  81. boddie.appendChild(rats);
  82. bubb[i]=rats.style;
  83. bubb[i].zIndex=(over_or_under=="over")?"1001":"0";
  84. }
  85. bubble();
  86. }}
  87.  
  88. function bubble() {
  89. var c;
  90. for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {
  91. bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";
  92. bubb[c].top=(bubby[c]=shigh)+"px";
  93. bubb[c].width="3px";
  94. bubb[c].height="3px"
  95. bubb[c].visibility="visible";
  96. bubbs[c]=3;
  97. break;
  98. }
  99. for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
  100. setTimeout("bubble()", 40);
  101. }
  102.  
  103. function update_bubb(i) {
  104. if (bubby[i]) {
  105. bubby[i]-=bubbs[i]/2+i%2;
  106. bubbx[i]+=(i%5-2)/5;
  107. if (bubby[i]>0 && bubbx[i]>0 && bubbx[i]<swide) {
  108. if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
  109. bubb[i].width=bubbs[i]+"px";
  110. bubb[i].height=bubbs[i]+"px";
  111. }
  112. bubb[i].top=bubby[i]+"px";
  113. bubb[i].left=bubbx[i]+"px";
  114. }
  115. else {
  116. bubb[i].visibility="hidden";
  117. bubby[i]=0;
  118. return;
  119. }
  120. }
  121. }
  122.  
  123. window.onresize=set_width;
  124. function set_width() {
  125. var sw_min=999999;
  126. var sh_min=999999;
  127. if (document.documentElement && document.documentElement.clientWidth) {
  128. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  129. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  130. }
  131. if (typeof(self.innerWidth)=='number' && self.innerWidth) {
  132. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  133. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  134. }
  135. if (document.body.clientWidth) {
  136. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  137. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  138. }
  139. if (sw_min==999999 || sh_min==999999) {
  140. sw_min=800;
  141. sh_min=600;
  142. }
  143. swide=sw_min;
  144. shigh=sh_min;
  145. }
  146.  
  147. function createDiv(height, width) {
  148. var div=document.createElement("div");
  149. div.style.position="absolute";
  150. div.style.height=height;
  151. div.style.width=width;
  152. div.style.overflow="hidden";
  153. div.style.backgroundColor="transparent";
  154. return (div);
  155. }
  156. // ]]>
  157. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement