Version 0.3
by Erik Friend
Creates a circular particle emitter of specified radius centered and offset at specified screen location. Particles appear outside of emitter and travel outward at specified velocity while fading until disappearing in specified decay time. Particle size is specified in pixels. Particles reduce in size toward 1px as they decay. A custom image(s) may be used to represent particles. Multiple images will be cycled randomly to create a mix of particle types. Requires jQuery
Download particle.js. Place particle.js and particle.gif into your website document root.
Include particle.js by adding the following code to your page <head>.
<script type="text/javascript" src="particle.js"></script>
Start particle showers with the following:
var emitter = new particle_emitter({
image: ['particle.gif'],
center: ['50%', '50%'], offset: [0, 0], radius: 0,
size: 16, velocity: 50, decay: 2000, rate: 20
}).start();
or
var emitter = new particle_emitter({ size: 16, velocity: 50, decay: 2000, rate: 20 });
emitter.start();
Stops particles with the following:
emitter.stop();
Move emitter location with the following:
// Recenter coordinate system to an x/y position in any css unit
emitter.centerTo('50%', '200px');
or
// Move emitter center relative to coordinate center
emitter.offsetTo(-5, -100);
Particles no longer fade to 0 opacity in Google Chrome. Chrome clips alpha-transparency masks on any element with partial opacity. Caused by Webkit + Skia engine. No known fix.
Added image support. One or more images may be used as particles.
Initial Release