3d text

by narensrinivasans

HTML

<ul>
        <li><a href="#">I am</a></li>
        <li><a href="#">Naren</a></li>
        <li><a href="#">Web Developer</a></li>
        <li><a href="#">Living in</a></li>
        <li><a href="#">Chennai</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">3d Text</a></li>
            <li><a href="#">with jquery</a></li>
</ul>

CSS

body{
            background:#000;
            margin:0;
            overflow:hidden;
            padding:0;
        }
        li{
            color:#fff;
            font:bold 13px Arial,sans-serif;
            list-style: none;
        }
        a{
            text-decoration:none;
        }

JavaScript

//Setup Arrays that will hold the x,y,z of each element.
var x = new Array();
var y = new Array();
var z = new Array();

//Get the list of items.
var items = $('li');

//Animate the items.
function animate()
{
    
    //Step through each item.
    for(i = items.length - 1; i >= 0; i--){
        
        
        //variables for movement.           
        var xVar = 50 + x[i]            // x value
        var yVar = 50 + y[i] * z[i]++;  // y value, move towards bottom of screen
        var zVar = 10 * z[i]++;         // z value, text get larger.
        
        
        //Check to see if text position is still on the screen.
        // the #'s are %.   100 is far right or bottom, 0 is top or left.
        // for z value it's the font size in %.
        if (!xVar | xVar < 0 | xVar > 90| 
            yVar < 0 | yVar > 90 | 
            zVar < 0 | zVar > 1500)
        {
            //if it's off the screen randomly pick a starting place.
            x[i]= Math.random() * 2 - 1;
            y[i] = Math.random() * 2 - 1;
            z[i] = 2; 
            
        }
        else
        {
            //if it's still on the screen apply the appropiate styles.
            
            $(items[i]).css("position", "absolute"); // make sure we can move the text around.
            $(items[i]).css("top", xVar+"%");  // y value
            $(items[i]).css("left", yVar+"%"); // x value
            
            $(items[i]).css("fontSize", zVar+"%"); // font size (illusion of perspective.)
            $(items[i]).css("opacity",(zVar)/1000); // fade in from the distance.
        }
    }

    setTimeout(animate, 50);
}

animate();