FireFlies in CSS/JS

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="fireflies">
</div>

<button id="scatter">Scatter</button>
<button id="reset">Come Together</button>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
  perspective:500px;
  background-color:#000000;
  background-size:cover;
  background-image:url(https://i.ytimg.com/vi/bhvjfC5qenQ/maxresdefault.jpg);
}
.fireflies{
  transform-style:preserve-3d;
  position:fixed;
  left:50%;
  top:60%;
  width:0px;
  height:0px;
  animation: spin infinite 10s linear; 
}
@keyframes spin{
  0% { transform:rotateY(0deg); }
  100% { transform:rotateY(360deg); }
}
.firefly{
  position:absolute;
  width:2px;
  height:2px;
  background-color:#ff0000;
}

JavaScript

var fireflies = {};

fireflies.placeholder = $('.fireflies');
fireflies.point3d = { x: 0, y: 0, z: 0 };

fireflies.amount = 300;
fireflies.min_duration = 5000;
fireflies.max_duration = 10000;

fireflies.start_y = 0;
fireflies.end_y = 1000;


fireflies.radius = 100;
fireflies.flies;

fireflies.spawn = function(){

	for(var i=0;i<fireflies.amount;i++){
  	
    var ms = fireflies.randomIntFromInterval(fireflies.min_duration,fireflies.max_duration);
    
    var x = fireflies.randomIntFromInterval(fireflies.radius*-1+fireflies.point3d.x,fireflies.radius+fireflies.point3d.x);
    var y = fireflies.randomIntFromInterval(fireflies.start_y+fireflies.point3d.y,fireflies.start_y-fireflies.radius+fireflies.point3d.y);
    var z = fireflies.randomIntFromInterval(fireflies.radius*-1+fireflies.point3d.z,fireflies.radius+fireflies.point3d.z);
    var rx = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
  	var ry = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
  
  var color_r = fireflies.randomIntFromInterval(0,255);
  var color_g = fireflies.randomIntFromInterval(0,100);
  var color_b = fireflies.randomIntFromInterval(0,100);
   
  	var ff = $('<div class="firefly"></div>');
    ff.css('box-shadow','0 0 10px 3px rgba(' + color_r + ',' + color_g + ',' + color_b + ',0.6)');
    ff.css('background-color','rgb(' + color_r + ',' + color_g + ',' + color_b + ')');
    ff.css('transition','all ' + ms + 'ms ease-in-out');
    ff.css('transform','rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) translateX(' + x + 'px) translateZ(' + z + 'px) translateY(' + y + 'px)');
    
    fireflies.placeholder.append(ff);
    
  }
  
  fireflies.flies = $('.firefly');
  
}

fireflies.scatter = function(){
	
  fireflies.canscatter = true;
  
  fireflies.flies.each(function(){
  
  	fireflies.animate_fly($(this));
  
  });

}

fireflies.reset = function(){
	
  fireflies.flies.each(function(){
  
  	fireflies.animate_fly_reset($(this));
  
 ...