How to Fly Text

With dynamic positioning, it is possible to create simple animated effects, such as flying text, by manipulating the position of elements on a page over time. The use of flying text is fairly common on the Internet, usually to draw attention to a piece of information on a page—like to announce a new version of a product and prompt the user to download it. Another common use for flying text is in slide show presentations. Each main bullet point can appear independently of others, flying in from the right, for example, and setting the animation to occur automatically or on a mouse click.

The MARQUEE object, with the BEHAVIOR attribute set to SLIDE, provides a similar functionality, scrolling text in the direction specified in the DIRECTION attribute (that is, UP, DOWN, LEFT, or RIGHT). MARQUEE is currently supported only in Microsoft® Internet Explorer and is limited to straight vertical and horizontal scrolling, whereas flying text through positioning gives the Web author complete freedom to move text around.

This article demonstrates both ways to implement flying text, through the MARQUEE element and through cascading style sheets (CSS) positioning. To better understand positioning in Dynamic HTML, as well as the CSS object model in Internet Explorer 4.0, see Positioning.

Flying Text with MARQUEE

Implementing flying text with the MARQUEE element in Internet Explorer is a very simple process.

Enclose the text you want to fly in <MARQUEE> and </MARQUEE> tags.

Note that the MARQUEE element takes HTML-formatted text between the start and end tags.

<MARQUEE behavior=slide>
<UL>
    <LI class=yellow>Use Dynamic HTML to differentiate your content 
    and create compelling Web sites
</UL>
</MARQUEE>

Define the flying area using the WIDTH and/or HEIGHT attribute(s), depending on the flying direction specified. Positioning the MARQUEE element on the page using the position, top, and left CSS attributes might also be appropriate at this point.
Note For flying horizontally (DIRECTION= LEFT or RIGHT), the HEIGHT attribute seemingly gets ignored and, as such, need not be specified. Regardless of the HEIGHT specified, only one line of text is scrolled. If multiple lines of text need to be scrolled horizontally together, insert line breaks using the BR element.
```
<MARQUEE width=700 style="position:absolute; top: 180" 
    ... direction=left>
<UL>
    <LI class=yellow>Use the Document Object Model (DOM)<br>
    to create interactive documents
</UL>
</MARQUEE> 
```
Specify all other appropriate attributes to control flying speed and number of times to scroll.
```
<MARQUEE width=700 style="position:absolute; top: 180" 
loop=1 SCROLLAMOUNT=10 SCROLLDELAY=20 behavior=slide direction=left>
```
Click the Show Me button below to see a flying text sample using the MARQUEE element. The sample is derived from a slide show presentation and has been set up to work best on an 800 x 600 display, with a full-screen browser window.

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.

Implementing Steps 1-3 above in a page causes text to fly as soon as the page comes up. (Click the Show Me button above to see how this works.) However, this might not always be appropriate. In some cases, Web authors would like to have text flying on demand—say on a mouse click or on a timer, as in a slide show presentation. The way to do this is through the MARQUEE's start and stop methods, as illustrated in the following code:

<SCRIPT>
function window.onload()
{
    Marquee1.stop();      // set marquee to stop initially
}
    function document.onclick()
{
    Marquee1.start();     // Marquee1 is the ID of the MARQUEE
}
</SCRIPT>

Flying Text Using Dynamic Positioning

Implementing flying text with CSS positioning, although simple, involves a little more work than with the MARQUEE element because you have to manipulate the position of the element yourself.

The following steps outline the process:

Position the elements on the page.
It is best to do this with the rest of the elements laid out on the page so you can visualize where everything fits. This can be done with the help of style sheets. The following sample defines a global style sheet with a STYLE element, specifying fonts, colors, and margins to be used.
```
<STYLE>

</STYLE>
   
```
When positioning elements, decide whether to use absolute or relative positioning. Static position, the default, leaves the object to flow with the rest of the document. Relative positions the element at an offset from its normal position in the flow. Absolute removes the object from the flow, allowing you to specify a fixed location for the element.
With the style sheet defined above, the sample below uses relative positioning—text is positioned somewhere near the element's position in the document (that is, to the left, right, top, or bottom). The sample uses a DIV element and sets the appropriate CSS attributes for the text block. Note that the visibility property is initially set to "hidden" so that the text is not visible until flown in. (This might not be necessary in every case, although it is recommended.)
```
<div ID=Text1 style="position:relative; visibility: hidden">
    <LI CLASS=yellow>Use Dynamic HTML to differentiate your content and 
    create compelling Web sites
</div>
```
Calculate initial position for flying.
When the destination location is determined in Step 1, it is time to set up the element for flying. Position the element on the edge of the screen opposite the flying direction—that is, to fly an element right to left, position the element on the right edge of the screen. It is important to place the element just on the edge of the screen, not on some random coordinate offscreen, so that the text immediately becomes visible on the page as it flies in.
The following sample flies the first block of text vertically, from the top down, and calculates the initial y-coordinate position for the element as shown below. For more information on how to access the dimension and location of elements on the page through the document object model, see Measuring Element Dimension and Location.
```
Text1.style.pixelTop = document.body.offsetTop
                        - Text1.offsetTop
                        - Text1.offsetHeight; 
</SCRIPT>
```
Initializing the position can be done either on the onload event or when just about ready to fly the text.
Set the visibility property to "visible".
Recall that it has been initialized to "hidden" in Step 1 above.
```
Text1.style.visibility= "visible";
```
On a timer, call the function to fly the text in.
The timer is set up using setTimeout or setInterval.
```
window.setTimeout ("FlyFromTop (Text1,0);",10);
```
Fly the text in, adjusting the pixelTop or the pixelLeft property for flying top to bottom or left to right, respectively.
The following function takes a pointer to the object being flown and also a stop value. The stop value indicates the pixelTop value at which flying stops.
```
function FlyFromTop (oDiv,stopY)
{
    oDiv.style.pixelTop += 10;
    if (oDiv.style.pixelTop >= stopY) 
        oDiv.style.pixelTop = stopY;
    else
    {
        copyDiv = oDiv;
        copyY   = stopY;
        window.setTimeout ("FlyFromTop (copyDiv,copyY);", 10);
    }     
}
```
Three other functions have been similarly defined in the sample—to fly from right, fly from left, or fly from bottom.
Click the Show Me button below to see a flying text example using dynamic positioning. The sample is derived from a slide show presentation and has been set up to work best on an 800 x 600 display, with a full-screen browser window.

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.

The following links provide more information for flying text.