Raphaelist (balling)

Raphael de SVG !

by nekosmash

HTML

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
</div>

CSS

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#fff;
    text-align:center;
}

.text{
    letter-spacing: 20px;
    color:#fff;
    font-size:150%;
    width:60%;
    height:60%;
    position:absolute;
    left:20%;
    top:40%;
    z-index:1;
}

JavaScript

var paper;
var rect;

window.onload = function () {        
    paper = Raphael(0,0,"100%","100%");
    drawimage();
};


function drawimage(){

    for(i=0;i<200;i++){
        randx = Math.floor(Math.random()*$(window).width());
        
        randy = Math.floor(Math.random()*$(window).height());
        if(i != 99){
            c =paper.circle(randx,randy,10).attr({
                stroke:"none",
                fill:Raphael.getColor(1),opacity:0.5})
                .mousemove(ball_move);
            c.data("y",randy);
            c.data("x",randx);
        }else{
            c =paper.circle(randx,randy,10).attr({
                stroke:"none",
                fill:"#000",opacity:0.5})
                .click(ball_fall);
        }
        
    }   
}

 
function ball_move(e){
    var moving = false;   
    if(moving==false){
        moving = true;
        centerx = this.getBBox().x +
            this.getBBox().width/2;
        centery = this.getBBox().y +
            this.getBBox().height/2;
        var movex = centerx  - e.x;
        var movey = centery - e.y;
        this.animate({
            cx:centerx + movex*5,
            cy:centery + movey*5},400,">",
            function(){moving = false;});

    }
};


window.onresize = function () {
    rect.remove();
    draw();
};
var fallen=false;
function ball_fall(){
    
    paper.forEach(function (el) {
        height = $(window).height();
        if(fallen==false){
            el.animate({
                cy:height-10},
                height*height/100,
                "bounce");
        }else{
           
            el.animate({
                cy:el.data("y"),
                cx:el.data("x")
            },height*height/100,"backOut");            
        } 
    })
    fallen=true;
}