Raphaelist (like 3 dimention)

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 centerx = $(window).width()/2;
var centery = $(window).height()/2;
var rarray = new Array();
var rarray2 = new Array();
var k=0;
var j=0;

window.onload = function () {        
    paper = Raphael(0,0,"100%","100%");
    
    for(i=0;i<10;i++)
    {
        //setTimeout("CreateCircle2(50)",i*500);
        setTimeout("CreateCircle(200)",i*500);
        //setTimeout("CreateCircle2(350)",i*500);
    }
    
};

function CreateCircle(offset){
    c = paper.circle($(window).width(),offset,10)
        .attr({stroke:"none",fill:"#888",opacity:0.3});
    c.data("x", $(window).width()-1);
    c.data("index", k);
    rarray2[k]=c;
    setInterval("AnimateCircle('"+ k +"')",5);
    k++;
}

function AnimateCircle(index){
    var cw=0;
    var xdis = rarray2[index].data("x");
    //if(xdis>100){
        cw=Math.sqrt(Math.pow(centerx,2)-Math.pow(centerx-xdis,2))/7;
        xdis=xdis-cw/10;
        rarray2[index].data("x",xdis);
        rarray2[index].attr({cx:xdis,r:$(window).height()/cw+5});
    //}
}