Raphaelist_vol24 (background)

Raphael de SVG ! vol24

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:#000;
    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 background_a;
    var background_b;
    var twidth;
    var theight;
    var xscale;
    var yscale;
    var rec;
    var rec2;
    var height = $(window).height();
    var width = $(window).width();
    var paper;
    var array1;

    var arrayall = new Array();

    window.onload = function () {
    
        paper = Raphael(0,0,"100%","100%");
        xscale=1;
        yscale=1;
        twidth = $(window).width();
        theight = $(window).height();
        background_a = paper.rect(0,0,twidth,theight)
        .attr({
            stroke:"none",
            fill:"45-#000-#400"
        });
        
        arrayall[0] = Create3D(0.9);
        arrayall[1] = Create3D(0.7);
        arrayall[2] = Create3D(0.5);
        arrayall[3] = Create3D(0.3);        
        background_b = paper.rect(0,0,twidth,theight)
        .attr({
            stroke:"none",
            fill:"#f08",
            opacity:.1
        });
        
        background_b.mousemove(back_mousemoved);
       
        function getX(ox,x,z){
            return ox - (x/width*100)/z;
        }
        function getY(oy,y,z){
            return oy - (y/height*100)/z;
        }
    }

        
function back_mousemoved(e){
    for(k=0;k<arrayall.length;k++){
        for(j=0;j<arrayall[k].length;j++){
            for(i=0;i<arrayall[k][j].length;i++){
                var el = arrayall[k][j][i];
                var z = el.data("zindex");
                el.attr({x:el.data("orgx")-(e.x/600*100)*z*2});
                el.attr({y:el.data("orgy")-(e.y/600*100)*z*2});
            }            
        }
    }                
}

function Create3D(zindex){
    var rectsize = 200*zindex;
    space = 1.5 + (1-zindex)/zindex;
    hcount = height/(rectsize * space);
    wcount = width/(rectsize * space);
    var rectarray = new Array(Math.floor(hcount)+1);
    for(j=0;j<hcount+1;j++){
        rectarray[j] = new Array(Math.floor(wcount)+1);
        for(i=0;i<wcount+1;i++){
            rectarray[j][i]=paper.rect(
      ...