3D Flying Text in jQuery

Home Text & Link Effects3D Flying Text in jQuery

3D Flying Text in jQuery

14 years ago Views

12557

2382

devirtuoso

It’s just a matter of time before some creates a jQuery plug-in much like Papervision for Flash. Until then the 3D experiments in jQuery continue. Here is a example that will show you how to make 3D flying text in jQuery.

What We Will Be Building

Here’s the plan. Build a jQuery component that takes the text from a <ul> and make it fly towards the screen at random intervals. The affect will look something like traveling through space, or a title sequence for some cheesy space flick.

Getting Started

The first thing we’re going to need is some text to animate. We’re going to use a <ul> that has the alphabet in it, we might run the risk of the component looking like a scene from sesame street, but I think we’ll be okay this time. The html is pretty basic so I won’t go into to much detail.

Here is the HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>3D Flying Text</title>
    </head>
    <body>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            <li><a href="#">I</a></li>
            <li><a href="#">J</a></li>
            <li><a href="#">K</a></li>
            <li><a href="#">L</a></li>
            <li><a href="#">M</a></li>
            <li><a href="#">N</a></li>
            <li><a href="#">O</a></li>
            <li><a href="#">P</a></li>
            <li><a href="#">Q</a></li>
            <li><a href="#">R</a></li>
            <li><a href="#">S</a></li>
            <li><a href="#">T</a></li>
            <li><a href="#">U</a></li>
            <li><a href="#">V</a></li>
            <li><a href="#">W</a></li>
            <li><a href="#">X</a></li>
            <li><a href="#">Y</a></li>
            <li><a href="#">Z</a></li>
        </ul>
    </body>
    <!-- Load jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</html>

The jQuery

There isn’t much to this one. We’re basically going to step through each item in the list, check to see if it’s still on the screen, if it is, move it down and enlarge the text. Through the magic of perspective it looks like the letters are coming right towards us.

Here is the jQuery:

//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)/3000); // fade in from the distance.
        }
    }

    setTimeout(animate, 9);
}

animate();

Just a couple of notes on speed. I initially tried using jQuery’s each() function but found a dramatic slowdown in comparison to the for loop. The each() method is great to work with, but if speed is an issue don’t bother using it. Also just another small thing, in the for loop I decremented each value (i—) instead of incrementing. This is also another speed boost that some people might not know about. It’s easier for your computer to process a for loop counting down then up. In this case there might not be a huge speed difference, but it is something to consider.

Tag: text effect