Guest User

Untitled

a guest
Sep 21st, 2019
108
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ////////////////////////////////////////////////////////////////////////
  2. // Fireworks-Script (c) 2017, Dominik Scholz / go4u.de Webdesign
  3. ////////////////////////////////////////////////////////////////////////
  4.  
  5. var fireworks = {
  6.  
  7. ///////////////////////////// configuration ////////////////////////////
  8.  
  9. // random colors
  10. _color: ['#D0D0D0', '#FF0000', '#FFFF00', '#22FF00', '#2040FF', '#00CCFF', '#FF00FF', '#A319D6'],
  11. // gravity factor
  12. _gravity: 0.07,
  13. // air resistance factor
  14. _resistance: 0.975,
  15. // zIndex of particles
  16. _zIndex: 20000,
  17. // maximal age of particles (in msec)
  18. _maxAge: 2000,
  19. // interval of appearing explosions (in msec)
  20. _interval: [500, 2500],
  21. // amount of particles per explosion
  22. _particlesPerExplosion: 40,
  23. // maximal speed of particle at moment of explosion
  24. _speed: 5,
  25. // minimal/maximal size of particle
  26. _minSize: 8,
  27. _maxSize: 12,
  28.  
  29.  
  30.  
  31. ///////////////////////////// private vars /////////////////////////////
  32.  
  33. _particles: [],
  34. _bodyWidth: 0,
  35. _bodyHeight: 0,
  36. _count: 0,
  37. _lastInterval: 0,
  38.  
  39.  
  40.  
  41. ////////////////////////////// functions ///////////////////////////////
  42.  
  43. // init fireworks
  44. init: function()
  45. {
  46. this._addEventListener(window, 'resize', function() { return fireworks.resize.apply(fireworks); });
  47. this._addEventListener(window, 'load', function() { return fireworks.start.apply(fireworks); });
  48. },
  49.  
  50.  
  51. // add an event listener
  52. _addEventListener: function(el, name, handler)
  53. {
  54. if (el.addEventListener)
  55. el.addEventListener(name, handler, false);
  56. else if (el.attachEvent)
  57. el.attachEvent('on' + name, handler);
  58. },
  59.  
  60.  
  61. // start fireworks
  62. start: function()
  63. {
  64. // init window size
  65. this.resize();
  66.  
  67. // start to move particles
  68. this._animFn = function() {fireworks._move();};
  69. this._lastInterval = this._time();
  70. requestAnimFrame(this._animFn);
  71.  
  72. this._addExplosion();
  73. },
  74.  
  75.  
  76. // get current time
  77. _time: function()
  78. {
  79. return +new Date();
  80. },
  81.  
  82.  
  83. // return a random integer
  84. _random: function(value)
  85. {
  86. return Math.random() * value;
  87. },
  88.  
  89.  
  90. // return a random array element
  91. _randomArray: function(arr)
  92. {
  93. return arr[
  94. Math.floor(
  95. Math.random() * (arr.length)
  96. )
  97. ];
  98. },
  99.  
  100.  
  101. // add a new explosion
  102. _addExplosion: function()
  103. {
  104. var x = Math.floor(this._random(this._bodyWidth)),
  105. y = Math.floor((this._random(.5) + .1) * this._bodyHeight),
  106. dx = this._random(10) - 5,
  107. dy = this._random(-2) - 1,
  108. c1 = this._randomArray(this._color),
  109. c2 = this._randomArray(this._color);
  110.  
  111. for (var i = 0; i < this._particlesPerExplosion; i++)
  112. {
  113. this._createParticle(
  114. x,
  115. y,
  116. dx,
  117. dy,
  118. i / (this._particlesPerExplosion - 1) * 180 * Math.PI,
  119. this._random(this._speed),
  120. this._random(1) > .5 ? c1 : c2
  121. );
  122. }
  123.  
  124. window.setTimeout(
  125. function() { return fireworks._addExplosion.apply(fireworks);},
  126. this._random(this._interval[1] - this._interval[0]) + this._interval[0]
  127. );
  128. },
  129.  
  130.  
  131. // creates a new particle
  132. _createParticle: function(x, y, dx, dy, rot, speed, color)
  133. {
  134. var el = null,
  135. foundEl = false,
  136. p = this._particles;
  137.  
  138. // look for old particle
  139. for (var i = 0, l = p.length; i < l; i++)
  140. if (p[i].data.age > 1)
  141. {
  142. el = p[i];
  143. foundEl = true;
  144. break;
  145. }
  146.  
  147. // create span child for particles
  148. if (!foundEl)
  149. {
  150. el = document.createElement('div');
  151. el.className = 'particle';
  152. el.style.position = 'absolute';
  153. el.style.fontSize = this._maxSize + 'px';
  154. el.style.zIndex = this._zIndex;
  155. el.style.width = this._maxSize + 'px';
  156. el.style.textAlign = 'center';
  157. el.style.overflow = 'hidden';
  158. el.innerHTML = '&#x25cf;';
  159. }
  160.  
  161. el.style.left = x + 'px';
  162. el.style.top = y + 'px';
  163. el.style.color = color;
  164. el.data = {
  165. x: x,
  166. y: y,
  167. dx: Math.cos(rot) * speed + dx,
  168. dy: Math.sin(rot) * speed + dy,
  169. color: color,
  170. age: Math.random() * .25
  171. };
  172.  
  173. if (!foundEl)
  174. {
  175. document.getElementsByTagName('body')[0].appendChild(el);
  176. this._particles.push(el);
  177. }
  178. },
  179.  
  180.  
  181. // move existing particles
  182. _move: function()
  183. {
  184. requestAnimFrame(this._animFn);
  185.  
  186. // calculate movement factor
  187. var dif = this._time() - this._lastInterval;
  188. this._lastInterval = this._time();
  189.  
  190. var delta = dif / 20,
  191. el,
  192. d,
  193. p = this._particles,
  194. r = Math.pow(this._resistance, delta),
  195. g = this._gravity * delta,
  196. a = dif / this._maxAge;
  197.  
  198. for (var i = 0, l = p.length; i < l; i++)
  199. {
  200. el = p[i];
  201. d = el.data;
  202.  
  203. if (d.age > 1)
  204. continue;
  205.  
  206. d.age += a;
  207. d.dy += g;
  208. d.dx *= r;
  209. d.dy *= r;
  210. d.x += d.dx * delta;
  211. d.y += d.dy * delta;
  212.  
  213. if (d.x < 0)
  214. {
  215. d.dx *= -1;
  216. d.x = 0;
  217. }
  218. else if (d.x > this._bodyWidth)
  219. {
  220. d.dx *= -1;
  221. d.x = this._bodyWidth;
  222. }
  223. if (d.y < 0)
  224. {
  225. d.dy *= -1;
  226. d.y = 0;
  227. }
  228. else if (d.y > this._bodyHeight)
  229. {
  230. d.dy *= -1;
  231. d.y = this._bodyHeight;
  232. }
  233.  
  234. if (d.age > 1)
  235. d.x = d.y = 0;
  236.  
  237. el.style.left = d.x + 'px';
  238. el.style.top = d.y + 'px';
  239. el.style.color = (Math.random() * .5 + d.age >= 1) ? 'transparent' : d.color;
  240. el.style.fontSize = Math.max(this._minSize, (1 - d.age) * this._maxSize) + 'px';
  241. }
  242. },
  243.  
  244.  
  245. // calculate new positions for all particles
  246. resize: function()
  247. {
  248. // get new width and height
  249. this._bodyWidth = this._getWindowWidth() - this._maxSize;
  250. this._bodyHeight = this._getWindowHeight() - this._maxSize - 10;
  251. },
  252.  
  253.  
  254. // get window width
  255. _getWindowWidth: function()
  256. {
  257. return document.getElementsByTagName('body')[0].offsetWidth;
  258. },
  259.  
  260.  
  261. // get window height
  262. _getWindowHeight: function()
  263. {
  264. var h = Math.max(self.innerHeight || 0, window.innerHeight || 0);
  265.  
  266. if (document.documentElement)
  267. h = Math.max(h, document.documentElement.clientHeight || 0);
  268. if (document.body)
  269. {
  270. h = Math.max(h, document.body.clientHeight || 0);
  271. h = Math.max(h, document.body.scrollHeight || 0);
  272. h = Math.max(h, document.body.offsetHeight || 0);
  273. }
  274.  
  275. return h;
  276. }
  277.  
  278. };
  279.  
  280. // shim layer with setTimeout fallback
  281. window.requestAnimFrame = (function(){
  282. return window.requestAnimationFrame ||
  283. window.webkitRequestAnimationFrame ||
  284. window.mozRequestAnimationFrame ||
  285. window.oRequestAnimationFrame ||
  286. window.msRequestAnimationFrame ||
  287. function (cb){
  288. window.setTimeout(cb, 1000 / 60);
  289. };
  290. })();
  291.  
  292. fireworks.init();
RAW Paste Data