sparkles!

Original: http://jsfiddle.net/triptych/BEc9J/

by majidf

HTML

<div id="demo">
    <div id="px"></div>
    <div id="py"></div>
    
    
</div>

CSS

body {
    margin:0;
    padding:0;
}
#demo {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    width: 300px;
    height: 300px;
   border: 1px solid green; 
   background: -webkit-gradient(
        linear, 0% 0%, 0% 100%, 
        from(#0D0766), 
        to(#054D18), 
        color-stop(.7,#159927),
        color-stop(.6,#1A1199)
        )
}

#demo div#px,
#demo div#py{
 color: #FFF;   
}


/** effects **/

.spin {
    -webkit-animation-name: 'spin';
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    x-webkit-transform-origin: 0 0;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }

}


.colorcycle {
    -webkit-animation-name: 'colorcycle';
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}


@-webkit-keyframes colorcycle {
    0%  { -webkit-text-fill-color: red;}
    20% { -webkit-text-fill-color: green;}
    40% { -webkit-text-fill-color: orange;}
    60% { -webkit-text-fill-color: purple;}
    80% { -webkit-text-fill-color: yellow;}
    100% { -webkit-text-fill-color: blue; }
}


.rise {
    -webkit-animation-name: 'rise';
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


@-webkit-keyframes rise
{
    0%   { 
      x-webkit-transform: translate(0px, 310px); 
      opacity: 1;
      }
 
    100% { 
      opacity: 0;
      -webkit-transform: translate(0px, -200px); 
      }
}

.weave {
    -webkit-animation-name: 'weave';
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alernate;
    -webkit-animation-timing-function:...

JavaScript

Y.namespace("magic");
Y.magic = {
    init: function(){
      //Y.log("init event");
      Y.magic.binding();
        //Y.magic.spawnSparkle(150,150);
    },
    binding: function(){
        Y.one("#demo").on("mousemove", function(e){
            //Y.log(e);
            Y.one("#px").set("innerText", e.pageX);
            Y.one("#py").set("innerText", e.pageY);
            
            //one in a 10 chance
            if (Math.floor(Math.random() * 100) > 90){
                //Y.log("poof");
                Y.magic.spawnSparkle(e.pageX,e.pageY);
            }
        });  
    },
    spawnSparkle: function(x,y){
        var character = Y.magic.rndShape();
        //create an element
        var newEl = Y.Node.create("<div class='rise'><div class='weave'><div class='colorcycle'><div class='spin'> </div></div></div></div>");
        Y.one('#demo').appendChild(newEl);
        //newEl.setXY([x,y]);
        newEl.setStyle("position", "absolute");
        newEl.setStyle("top",y+"px");
        newEl.setStyle("left", x+"px");
        newEl.one(".spin").set("innerHTML",character);
        rndSize = Math.floor(Math.random() * 2.5);
        
        newEl.setStyle("fontSize",rndSize + "em");
        
        Y.later(3000, newEl, function(){
            //Y.log("times up!")
            //Y.log(this)
               this.remove();
               this.destroy();
                })
    },
    rndShape: function(){
       
       var arrShape =[
         "&#10018;",
         "&#10019;",
         "&#10020;",
         "&#10021;",
         "&#10022;",
         "&#10025;",
         "&#10023;",
         "&#10026;",
         "&#10027;",
         "&#10028;",
         "&#10029;",
         "&#10030;",
         "&#10031;",
         "&#10033;",
         "&#10034;",
         "&#10035;",
         "&#10036;",
         "&#10037;",
         "&#10038;",
         "&#10039;",
         "&#10040;",
         "&#10041;",
         "&#10042;",
         "&#10043;",
         "&#10044;",
        ...