SHARE
TWEET

Untitled

a guest Sep 21st, 2019 99 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top