Dust 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;
}
.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:1px;
  height:1px;
  background-color:#666;
}

JavaScript

var fireflies = {};

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

fireflies.amount = 1000;
fireflies.min_duration = 3000;
fireflies.max_duration = 6000;

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.radius);
    var y = fireflies.randomIntFromInterval(fireflies.start_y,fireflies.start_y-fireflies.radius);
    var z = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
    var rx = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
  	var ry = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
  
    
  	var ff = $('<div class="firefly"></div>');
    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));
  
  });

}

fireflies.anglebetween2points = function(p1,p2){

	return Math.atan2(p2.z - p1.z, p2.x - p1.x) * 180 / Math.PI;

}

fireflies.animate_fly = function(obj,old_x,old_z){

	if(!old_x){ old_x = 0; }
  if(!old_z){ old_z = 0; }

	var rx = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
  var ry = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
  //var rz = fireflies.randomIntFromInterval(fireflies.radius*-1,fireflies.radius);
   
  var x...