/*settings variables*/
var fireworkDimensions = 10; //make each firework 5px in width and height
var fireworkTransitionTime = 1000; //in milliseconds
var resizeTimer = false; //resize delay timer (not set)
var rayWidth = 2; //width of firework ray
var rayLength = 100; //length of firework ray
var fireworkRayPositions = [
  [0, 3],
  [10, 5],
  [8, 6],
  [5, 8],
  [2, 8],
  [2, 6],
  [0, 4],
  [0, 2],
  [2, 2],
  [4, 0],
  [8, 2],
  [10, 2]
]; //firework array positions in px format: bottom,right
//210
var blurLights = true;

// IF THE BROWSER IS INTERNET EXPLORER 10 OR 11
var UAString = navigator.userAgent;
if ((navigator.appVersion.indexOf("MSIE 10") != -1) || (UAString.indexOf("Trident") !== -1 && UAString.indexOf("rv:11") !== -1)) {
  //ie 10 and 11 don't support filter blurring
  blurLights = false;
}

var fireworkCounter = 0;
var fireworkRayRotation = [0, -30, -60, -90, -120, -150, -180, -210, -240, 90, 60, 30];

window.addEventListener('load', function() {
  initialize();
});

function initialize() {
  fireworkTimers = [];
  createStars();
  createFireworks();

  function createStars() {
    var starContainer = document.getElementById('starContainer');
    starContainer.innerHTML = '';
    for (var i = 0; i != window.innerWidth; i++) {
      var star = document.createElement('div');
      star.className = 'star';
      star.style.opacity = Math.random() * 0.5;
      var randomDimensions = Math.floor(Math.random() * 4);
      star.style.width = randomDimensions + 'px';
      star.style.height = randomDimensions + 'px';
      star.style.top = Math.floor(Math.random() * starContainer.offsetHeight - randomDimensions) + 'px';
      star.style.left = Math.floor(Math.random() * starContainer.offsetWidth - randomDimensions) + 'px';
      starContainer.appendChild(star);
    }
  }

  function createFireworks() {
    var fireworkContainer = document.getElementById('fireworksContainer');
    fireworkContainer.innerHTML = '';
    var numFireworks = Math.floor(window.innerWidth / fireworkDimensions);
    var colors = ['#001EFF', '#DE0013', '#E2BC00', '#6600FF', '#78DD00', '#E06CBE'];
    //var colors = ['#FFC47A','#FF312D','#5CC1FF','#FF9137','#FFCE1E'];
    //#001EFF (blue), #DE0013 (red), #E2BC00 (yellow), #6600FF purple, #78DD00 (green), #E06CBE pink
    for (var i = 0; i != numFireworks; i++) {
      var firework = document.createElement('div');
      firework.className = 'fireworkContainer';
      firework.style.width = fireworkDimensions + 'px';
      firework.style.height = fireworkDimensions + 'px';
      var fireworkColor = colors[Math.floor(Math.random() * colors.length)];
      firework.style.backgroundColor = fireworkColor;
      firework.style.left = Math.floor(Math.random() * ((window.innerWidth - firework.offsetWidth) - (5 * firework.offsetWidth) + 1)) + (5 * firework.offsetWidth) + 'px';
      var numFireworkRay = Math.floor(Math.random() * 20);
      for (var j = 0; j != 12; j++) {
        var ray = document.createElement('div');
        ray.style.backgroundColor = fireworkColor;
        ray.style.bottom = fireworkRayPositions[j][0] + 'px';
        ray.style.right = fireworkRayPositions[j][1] + 'px';
        ray.className = 'fireworkRay';
        ray.style.transform = 'rotate(' + fireworkRayRotation[j] + 'deg)';
        firework.appendChild(ray);
        //fireworkRayPositions
        //fireworkRayRotation
      }
      if (blurLights == true) {
        var light = document.createElement('div');
        firework.appendChild(light);
        light.className = 'light';
      }
      fireworkContainer.appendChild(firework)
    }
    //console.log(fireworkContainer.children.length)
    fireworkTiming();
  }
}

function fireworkTiming() {
  var numCompletedFireworks = 0;
  var fireworks = document.getElementsByClassName('fireworkContainer');
  for (var i = 0; i != fireworks.length; i++) {
    createTimer(i, fireworks[i]);
  }

  function createTimer(i, firework) {
    fireworkTimers.push(window.setTimeout(function() {
      firework.style.bottom = Math.floor(Math.random() * ((window.innerHeight * .9) - (window.innerHeight * .7) + 1)) + (window.innerHeight * .7) + 'px';
      numCompletedFireworks++;
      explodeTimer(firework);
      if (numCompletedFireworks == fireworks.length - 1) {
        repositionFireworks();
        //console.log('fireworks cycled, reset them')
      }
      //Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
      //i*Math.floor(Math.random()*6000))
      fireworkCounter++;
      //console.log(fireworkCounter);
    }, i * Math.floor(Math.random() * (4000 - 2000 + 1)) + 2000));
  }

  function explodeTimer(firework, i) {
    //var firework = firework;
    //console.log(firework.innerHTML)
    window.setTimeout(function() {
      var fireworkRays = firework.getElementsByClassName('fireworkRay');
      var light = firework.getElementsByClassName('light')[0];
      for (var i = 0; i != fireworkRays.length; i++) {
        fireworkRays[i].style.height = rayLength + 'px';
        fireworkRays[i].style.width = rayWidth + 'px';
        fireworkRays[i].style.boxShadow = "10px 10px 10px #fff";
      }
      if (blurLights == true) {
        light.style.width = 2 * rayLength + 'px';
        light.style.height = 2 * rayLength + 'px';
        light.style.backgroundColor = firework.style.backgroundColor;
      }
      //alert(light.length)
      window.setTimeout(function() {
        firework.style.opacity = '0';
      }, 800);
    }, fireworkTransitionTime - 200);
  }
}

function repositionFireworks() {
  var fireworks = document.getElementsByClassName('fireworkContainer');
  //var colors = ['#FFC47A','#FF312D','#5CC1FF','#FF9137','#FFCE1E'];
  var colors = ['#001EFF', '#DE0013', '#E2BC00', '#6600FF', '#78DD00', '#E06CBE'];
  for (var i = 0; i != fireworks.length; i++) {
    var fireworkColor = colors[Math.floor(Math.random() * colors.length)];
    fireworks[i].style.opacity = '1';
    fireworks[i].lastChild.removeAttribute('style');
    var fireworkRays = fireworks[i].getElementsByClassName('fireworkRay');
    for (var j = 0; j != fireworkRays.length; j++) {
      fireworkRays[j].style.width = '0px';
      fireworkRays[j].style.height = '0px';
      fireworkRays[j].style.backgroundColor = fireworkColor;
    }
    fireworks[i].style.backgroundColor = fireworkColor;
    fireworks[i].style.left = Math.floor(Math.random() * ((window.innerWidth - fireworks[i].offsetWidth) - fireworks[i].offsetWidth + 1)) + fireworks[i].offsetWidth + 'px';
    fireworks[i].style.bottom = '0';
  }
  for (var i = 0; i != fireworkTimers.length; i++) {
    window.clearTimeout(fireworkTimers[i]);
  }
  fireworkTiming();
}

window.addEventListener('resize', function() {
  window.clearTimeout(resizeTimer);
  resizeTimer = window.setTimeout(function() {
    initialize();
  }, 100);
});

#projectContainer {
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#starSuperContainer {
  width: 100vw;
  height: 70vh;
  position: relative;
}
#starContainer {
  width: 100%;
  height: 100%;
}
#starFade {
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(transparent, #333);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(transparent, #333);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(transparent, #333);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(transparent, #333);
  /* Standard syntax */
  position: absolute;
  top: 0;
}
.star {
  background-color: #fff;
  border-radius: 50%;
  position: fixed;
}
.fireworkContainer {
  /*width:20px;
                height:20px;*/
  margin-top: -4px;
  margin-bottom: -4px;
  position: absolute;
  display: inline-block;
  -o-transition: all 1s linear, opacity 2s linear;
  -moz-transition: all 1s linear, opacity 2s linear;
  -webkit-transition: all 1s linear, opacity 2s linear;
  -ms-transition: all 1s linear, opacity 2s linear;
  transition: all 1s linear, opacity 2s linear;
  bottom: 0;
  border-radius: 50%;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  /*-webkit-box-shadow: 0 8px 6px -6px red;
                -moz-box-shadow: 0 8px 6px -6px red;
                box-shadow: 0 8px 6px -6px red;*/
}
.fireworkContainer * {
  -o-transition: all .8s linear, opacity .1s linear;
  -moz-transition: all .8s linear, opacity .1s linear;
  -webkit-transition: all .8s linear, opacity .1s linear;
  -ms-transition: all .8s linear, opacity .1s linear;
  transition: all .8s linear, opaciyt .1s linear;
  position: absolute;
  width: 0;
  height: 0;
  -o-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform-origin: bottom center;
}
#fireworksContainer {
  position: fixed;
  bottom: -100px;
  display: table;
  left: 10px;
}
* {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}
.light {
  border-radius: 50%;
  opacity: .4;
  -webkit-filter: blur(40px);
  -o-filter: blur(40px);
  -moz-filter: blur(40px);
  -ms-filter: blur(40px);
  filter: blur(add=0, direction=300, strength=10);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div id="projectContainer">
  <div id="starSuperContainer">
    <div id="starContainer"></div>
    <div id="starFade"></div>
  </div>
  <div id="fireworksContainer"></div>
</div>