Advertisement
izuemis

heart blobs background

Oct 25th, 2022
239
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.61 KB | None | 0 0
  1. <script type="text/javascript">
  2. // <![CDATA[
  3. var colour="#FFDEDE"; // what colour are the blobs
  4. var speed=50; // speed of animation, lower is faster
  5. var blobs=20; // how many blobs are in the jar
  6. var charc='♥'; // a blob - can be changed to charc='hello' or charc='*' for a different effect
  7.  
  8. /***************************\
  9. * Blobs in a Jar Effect *
  10. * (c)2012 mf2fm web-design *
  11. * http://www.mf2fm.com/rv *
  12. * DON'T EDIT BELOW THIS BOX *
  13. \***************************/
  14.  
  15. window.onload=fill_the_jar;
  16. var div;
  17. var xpos=new Array();
  18. var ypos=new Array();
  19. var zpos=new Array();
  20. var dx=new Array();
  21. var dy=new Array();
  22. var dz=new Array();
  23. var blob=new Array();
  24. var swide=800;
  25. var shigh=600;
  26. function fill_the_jar() {
  27. var i, dvs;
  28. div=document.createElement('div');
  29. dvs=div.style;
  30. dvs.position='fixed';
  31. dvs.left='0px';
  32. dvs.top='0px';
  33. dvs.width='1px';
  34. dvs.height='1px';
  35. document.body.appendChild(div);
  36. set_width();
  37. for (i=0; i<blobs; i++) {
  38. add_blob(i);
  39. jamjar(i);
  40. }
  41. }
  42.  
  43. function add_blob(ref) {
  44. var dv, sy;
  45. dv=document.createElement('div');
  46. dv.appendChild(document.createTextNode(charc));
  47. sy=dv.style;
  48. sy.position='absolute';
  49. sy.textAlign="center";
  50. if (navigator.appName=="Microsoft Internet Explorer") {
  51. sy.fontSize="10px";
  52. sy.width="100px";
  53. sy.height="100px";
  54. sy.paddingTop="40px";
  55. sy.color=colour;
  56. }
  57. else sy.color='rgba(0,0,0,0)';
  58. ypos[ref]=Math.floor(shigh*Math.random());
  59. dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  60. xpos[ref]=Math.floor(swide*Math.random());
  61. dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  62. zpos[ref]=Math.random()*20;
  63. dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
  64. blob[ref]=dv;
  65. div.appendChild(blob[ref]);
  66. set_blob(ref);
  67. }
  68. function rejig(ref, xy) {
  69. if (xy=='y') {
  70. dx[ref]=(0.5+Math.random())*sign(dx[ref]);
  71. dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
  72. }
  73. else {
  74. dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
  75. dy[ref]=(0.5+Math.random())*sign(dy[ref]);
  76. }
  77. }
  78. function sign(a) {
  79. if (a<0) return (-2);
  80. else if (a>0) return (2);
  81. else return (0);
  82. }
  83. function set_blob(ref) {
  84. var sy;
  85. sy=blob[ref].style;
  86. sy.top=ypos[ref]+'px';
  87. sy.left=xpos[ref]+'px';
  88. if (navigator.appName=="Microsoft Internet Explorer") {
  89. sy.filter="glow(color="+colour+",strength="+zpos[ref]+")";
  90. sy.fontSize=30-zpos[ref]+"px";
  91. }
  92. else {
  93. sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
  94. sy.fontSize=40+zpos[ref]+'px';
  95. }
  96. }
  97. function jamjar(ref) {
  98. if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y');
  99. ypos[ref]+=dy[ref];
  100. if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x');
  101. xpos[ref]+=dx[ref];
  102. if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
  103. zpos[ref]+=dz[ref];
  104. set_blob(ref);
  105. setTimeout("jamjar("+ref+")", speed);
  106. }
  107.  
  108. window.onresize=set_width;
  109. function set_width() {
  110. var sw_min=999999;
  111. var sh_min=999999;
  112. if (document.documentElement && document.documentElement.clientWidth) {
  113. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  114. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  115. }
  116. if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  117. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  118. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  119. }
  120. if (document.body.clientWidth) {
  121. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  122. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  123. }
  124. if (sw_min==999999 || sh_min==999999) {
  125. sw_min=800;
  126. sh_min=600;
  127. }
  128. swide=sw_min;
  129. shigh=sh_min;
  130. }
  131. // ]]>
  132. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement