How to Fly Text in Geometric Patterns

Flying text at its simplest—vertical and horizontal scrolling—can be created using the MARQUEE element. However, if diagonal text paths are what you seek, the dynamic positioning power of cascading style sheets (CSS) is the best choice. This article outlines the basics of how to animate text to move in geometric patterns. Achieving results may take more time at the onset, yet once you have a few routines for calculating different slopes, you can adapt them quickly to generate unique effects.

The following example causes text to fly from the upper-left corner of the client window down to mid-page. As the text stops, a second word appears underneath it. From the start, there is one essential to remember: position the elements to be moved around the page. Of the three values for positioning—absolute, relative, and static—absolute is most suited to text animation. Static positioning leaves the object to flow with the text as the browser window is sized and resized. Relative positioning situates an element at an offset to where it belongs in the text flow. Absolute positioning removes the object from the text flow altogether. In other words, a positioned object can be layered behind or in front of flowed elements on the page as well as dynamically repositioned.

Position the elements on the page.
Create a container for the text and then use CSS rules to position it. The following example shows a positioned DIV element that will default to (0,0) in the client window. Because the coordinate system in Microsoft® Internet Explorer is flipped, (0,0) is located at the top-left corner of the client window. In addition, it is important to note here that an element's coordinates are measured from its own upper-left corner.
```
<STYLE>
BODY           {  background-color: black;color: gold;
                  font: 36pt bolder sans-serif;  }
.DiagonalText  {  position: absolute;top: 0;left: 0;width: 200; }
</STYLE>
```
Write a function that calculates slope.
Dust off your algebra. Remember y = mx + b, where y controls the vertical and x the horizontal planes, b the offset from the vertical axis, and m the slope? For a steeper or shallower slope change the value of m.
The example below uses this formula to achieve a diagonal descent for the DIV. Then the left property of the style object for divMove is set equal to iHorizontal. Also, the top property for divMove is set equal to iVertical. In this way, the DIV is moved down and right with each loop of i.
```
var i;
var iVertical=0;
var iHorizontal=0;

function moveDiv()
{
  for(i = 0;i < 10;i++)
    {
       iHorizontal += 1; 
       iVertical = iHorizontal;
       divMove.style.top = iVertical;
       divMove.style.left = iHorizontal;
    }
.
.
.
}
```
Set the speed at which the text will progress.
Invoke the setInterval method to control how frequently the moveDiv function is executed. Without an interval, the DIV moves too quickly for the eye to see. The following example calls setInterval within a function that can be coded into the BODY onload event if desired.
```
var vTimerID;

function setTimer()  
{
  vTimerID=window.<B>setInterval</B>("moveDiv()",40);
}
```
Experiment with the actual interval—increase the number to slow the interval. The current setting of 40 milliseconds achieves fairly smooth text movement.
Stop the text movement by clearing the interval.
Execute the clearInterval method of the window object to stop the interval started in the setTimer function. This method is best placed in the moveDiv function so that a variable can track the number of iterations and stop execution at a set point in time. In the following example, the interval is cleared through a call to the variable vTimerID once iInterval has recorded more than 25 loops.
```
function moveDiv()
{
.
.
.
  iInterval++;
  if(iInterval > 25)
     {
        window.clearInterval(vTimerID);
        divToggle.style.visibility = "visible";
     }
}
```
Make the second DIV appear.
Many text animation effects are so easily created that they will lose their mystique if the secret gets out. That is the case for toggling visibility. Right after the interval is stopped in the example above, the divToggle is made visible by setting visibility="visible".
The task described in How to Create a Dynamic Table of Contents employs the CSS DISPLAY attribute to control table of contents visibility. In that task, it is important to use DISPLAY rather than VISIBILITY because toggling DISPLAY reflows the static elements on the page, causing the contents list to appear under the UL in which it is nested. In the sample above, the visibility property is used. The flying text is contained within a positioned DIV and stands outside the flow of static elements. Consequently, the functionality offered by the display property is unnecessary. In addition, the visibility property offers a slight performance advantage precisely because it does not force the page elements to be reflowed.

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Create repeating loops using arrays.
The for loop as coded in the function moveDiv calculates new coordinates on the fly. This structure is optimal as used for a single action. For repetitive text animations, an array is preferable. Although less streamlined than a simple loop, an array wins performance gains by caching the calculations that it would otherwise repeatedly make during program execution.

The following links provide more information on dynamically positioning text.