Blurb CSS3 particules with jQuery V0.1

Blobby Particules Factory with jQuery & CSS3 V0.1

by secretgspot

HTML

<a href="javascript:void(0);" id="s">SHADOW</a> VS <a href="javascript:void(0);" id="g">GRADIENT</a><br />

<div id="emitterZone1" class="emitterZone"></div>
<div id="emitterZone2" class="emitterZone"></div>

CSS

* { margin:0; padding:0; }
body { background-color:#FFFFFF; font:11px arial; color:grey; }
a { color:darkgrey; }

div.emitterZone {
    position:relative; /* childs are abs. positionned inside */
    display:block;
    margin:50px;
    float:left;
    border:1px dashed rgba(0,0,0, 0.05);
}
    div#emitterZone1 {
        width:260px;
        height:260px;
    }
    div#emitterZone2 {
        width:300px;
        height:100px;
    }

div.blurb1 {
    /* ---- SHADOW effect ---- */
    background-color: rgba(0, 0, 0, 1);
    box-shadow:0 0 30px rgba(0,0,0, 1);
       -o-box-shadow:0 0 30px rgba(0,0,0, 1);
       -webkit-box-shadow:0 0 30px rgba(0,0,0, 1);
       -moz-box-shadow:0 0 30px rgba(0,0,0, 1);
       -ms-box-shadow:0 0 30px rgba(0,0,0, 1);
   
    transition:all 3500ms cubic-bezier(0, 0, 0.9, 1); /* particules effect !!! report CSS transition time in function $.blurb() call arguments */
        -webkit-transition:all 3500ms cubic-bezier(0, 0, 0.9, 1); /* http://www.the-art-of-web.com/css/timing-function/ */
        -moz-transition:all 3500ms cubic-bezier(0, 0, 0.9, 1);
        -ms-transition:all 3500ms cubic-bezier(0, 0, 0.9, 1);
        -o-transition:all 3500ms cubic-bezier(0, 0, 0.9, 1);
}

div.blurb2 {
    /* ---- GRADIANT effect ---- http://www.westciv.com/tools/radialgradients/index.html */
    background-image: radial-gradient(50% 50%, circle cover,rgba(0, 0, 0, 1) 25%,rgba(255, 255, 255, 0) 45%);
        background-image: -moz-radial-gradient(50% 50%, circle cover,rgba(0, 0, 0, 1) 25%,rgba(255, 255, 255, 0) 45%);
        background-image: -webkit-radial-gradient(50% 50%, circle cover,rgba(0, 0, 0, 1) 25%,rgba(255, 255, 255, 0) 45%);
        background-image: -o-radial-gradient(50% 50%, circle cover,rgba(0, 0, 0, 1) 25%,rgba(255, 255, 255, 0) 45%);
        background-image: -ms-radial-gradient(50% 50%, circle cover,rgba(0, 0, 0, 1) 25%,rgba(255, 255, 255, 0) 45%);
   
    transition:all 2500ms cubic-bezier(0, 0, 0.9, 1); /* particules effect !!! report...

JavaScript

/*
    // Blobby Particules Factory with jQuery & CSS3 V0.1
    // by [email protected] 12/10/2011 
    // Infos : http://www.b2bweb.fr/molokoloco/blobby-particules-factory-with-jquery-css3-v0-1/
    // Demo V0.1 : http://jsfiddle.net/molokoloco/KASGN/
    // Demo V0.3 (With editor) : http://jsfiddle.net/molokoloco/NGm4M/
*/

(function ($) {
    
    var db        = function() { 'console' in window && console.log.call(console, arguments); };
        getRand    = function(miin, maax) { return parseInt(miin) + (Math.random() * (maax - miin)); };
    
    $.fn.extend({ // Extend jQuery with custom plugin
        
        blurb: function(options) {
             
             options = $.extend({ // Default values
                class               : 'blurb',    // Custom class of the div particule, without dot(.)
                transition          : 1000,     // Report the CSS animation delay : -webkit-transition:all 1000ms linear;
                minSize             : 1,        // radius of a particule
                maxSize             : 50,
                fadeTo              : 0,
                emitterRadius       : 0,        // radius of emitter
                emitterCenterLeft   : null,        // Default to the center of the box : Can be set in Pixels (not %)
                emitterCenterTop    : null,
                rate                : 1000 / 60,// emission rate in particles per milliseconds
            }, options || {});
            
            return this.each(function() {
                
                var $canvas        = $(this),
                    canvasW        = parseInt($canvas.width()), 
                    canvasH        = parseInt($canvas.height()),
                    timer        = null, // setInterval
                    zIndex        = 0;
                
                // Emite from the center of the box
                if (!options.emitterCenterLeft && options.emitterCenterLeft !== 0)
                   ...