Skip to content

Instantly share code, notes, and snippets.

@aclave1
Created February 2, 2014 17:39
Show Gist options
  • Save aclave1/8771948 to your computer and use it in GitHub Desktop.
Save aclave1/8771948 to your computer and use it in GitHub Desktop.
Simple Javascript particle Generator
/**
*
options:(OBJECT){
type : element type we're shooting.
x : x coordinate
y : y coordinate
color : color of element
}
*/
var ParticleGen = function(options) {
var that = this;
this.options = options;
var elem = document.createElement(options.type);
elem.style.left = options.x;
elem.style.top = options.y;
elem.style.width = '500px';
elem.style.height = '10px';
elem.style.background = '#cccccc';
elem.style.position = 'absolute';
document.body.appendChild(elem);
this.move = function(el) {
if (el.offsetLeft < (elem.offsetLeft + parseInt(elem.style.width) - parseInt(el.style.width))) {
el.style.left = (el.offsetLeft *= 1.02) + 'px';
}
};
return function() {
window.setInterval(function() {
var particle = document.createElement('div');
particle.style.position = 'absolute';
particle.style.background = '#0000ee';
particle.style.height = '5px';
particle.style.width = '10px';
particle.style.left = elem.offsetLeft + 'px';
particle.style.top = (elem.offsetTop) + 'px';
document.body.appendChild(particle);
window.setInterval(function() {
that.move(particle);
}, 20);
}, 500);
}();
};
/**
Initializes a simple Particle generator which shoots divs across the screen.
*/
var divgun = new ParticleGen({
'x': '200px',
'y': '200px',
'color': '#aa0000',
'type': 'div'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment