Advertisement
slstar

star emoji explosion click effect

Jul 15th, 2021
1,136
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.60 KB | None | 0 0
  1. <script type="text/javascript">
  2. // <![CDATA[
  3. var sparks=75; // how many sparks per clicksplosion
  4. var speed=33; // how fast - smaller is faster
  5. var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
  6. var colours=new Array('#03f', '#f03', '#0e0', '#93f', '#0cf', '#f93', '#f0c');
  7. // blue red green purple cyan orange pink
  8.  
  9. /****************************
  10. * Clicksplosion Effect *
  11. *(c)2012-3 mf2fm web-design *
  12. * http://www.mf2fm.com/rv *
  13. * DON'T EDIT BELOW THIS BOX *
  14. ****************************/
  15. var intensity=new Array();
  16. var Xpos=new Array();
  17. var Ypos=new Array();
  18. var dX=new Array();
  19. var dY=new Array();
  20. var stars=new Array();
  21. var decay=new Array();
  22. var timers=new Array();
  23. var swide=800;
  24. var shigh=600;
  25. var sleft=sdown=0;
  26. var count=0;
  27.  
  28. function addLoadEvent(funky) {
  29. var oldonload=window.onload;
  30. if (typeof(oldonload)!='function') window.onload=funky;
  31. else window.onload=function() {
  32. if (oldonload) oldonload();
  33. funky();
  34. }
  35. }
  36.  
  37. addLoadEvent(clicksplode);
  38.  
  39. function clicksplode() { if (document.getElementById) {
  40. var i, j;
  41. window.onscroll=set_scroll;
  42. window.onresize=set_width;
  43. document.onclick=eksplode;
  44. set_width();
  45. set_scroll();
  46. for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
  47. stars[j]=createDiv('⭐', 13);
  48. document.body.appendChild(stars[j]);
  49. }
  50. }}
  51.  
  52. function createDiv(char, size) {
  53. var div, sty;
  54. div=document.createElement('div');
  55. sty=div.style;
  56. sty.font=size+'px monospace';
  57. sty.position='absolute';
  58. sty.backgroundColor='transparent';
  59. sty.visibility='hidden';
  60. sty.zIndex='101';
  61. div.appendChild(document.createTextNode(char));
  62. return (div);
  63. }
  64.  
  65. function bang(N) {
  66. var i, Z, A=0;
  67. for (i=sparks*N; i<sparks*(N+1); i++) {
  68. if (decay[i]) {
  69. Z=stars[i].style;
  70. Xpos[i]+=dX[i];
  71. Ypos[i]+=(dY[i]+=1.25/intensity[N]);
  72. if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;
  73. else {
  74. Z.left=Xpos[i]+'px';
  75. Z.top=Ypos[i]+'px';
  76. }
  77. if (decay[i]==15) Z.fontSize='7px';
  78. else if (decay[i]==7) Z.fontSize='2px';
  79. else if (decay[i]==1) Z.visibility='hidden';
  80. decay[i]--;
  81. }
  82. else A++;
  83. }
  84. if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);
  85. }
  86.  
  87. function eksplode(e) {
  88. var x, y, i, M, Z, N;
  89. set_scroll();
  90. y=(e)?e.pageY:event.y+sdown;
  91. x=(e)?e.pageX:event.x+sleft;
  92. N=++count%bangs;
  93. M=Math.floor(Math.random()*3*colours.length);
  94. intensity[N]=5+Math.random()*4;
  95. for (i=N*sparks; i<(N+1)*sparks; i++) {
  96. Xpos[i]=x;
  97. Ypos[i]=y-5;
  98. dY[i]=(Math.random()-0.5)*intensity[N];
  99. dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
  100. decay[i]=16+Math.floor(Math.random()*16);
  101. Z=stars[i].style;
  102. if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
  103. else if (M<2*colours.length) Z.color=colours[count%colours.length];
  104. else Z.color=colours[i%colours.length];
  105. Z.fontSize='13px';
  106. Z.visibility='visible';
  107. }
  108. clearTimeout(timers[N]);
  109. bang(N);
  110. }
  111.  
  112. function set_width() {
  113. var sw_min=999999;
  114. var sh_min=999999;
  115. if (document.documentElement && document.documentElement.clientWidth) {
  116. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  117. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  118. }
  119. if (typeof(self.innerWidth)=='number' && self.innerWidth) {
  120. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  121. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  122. }
  123. if (document.body.clientWidth) {
  124. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  125. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  126. }
  127. if (sw_min==999999 || sh_min==999999) {
  128. sw_min=800;
  129. sh_min=600;
  130. }
  131. swide=sw_min-7;
  132. shigh=sh_min-7;
  133. }
  134.  
  135. function set_scroll() {
  136. if (typeof(self.pageYOffset)=='number') {
  137. sdown=self.pageYOffset;
  138. sleft=self.pageXOffset;
  139. }
  140. else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
  141. sdown=document.body.scrollTop;
  142. sleft=document.body.scrollLeft;
  143. }
  144. else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  145. sleft=document.documentElement.scrollLeft;
  146. sdown=document.documentElement.scrollTop;
  147. }
  148. else {
  149. sdown=0;
  150. sleft=0;
  151. }
  152. }
  153. // ]]>
  154. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement