How to Animate Text in HTML

by Brandy Alexander

Bring attention to your Web page content by animating the text so that it moves on the page. A graphics application or a scripting language is traditionally used to produce these movements. You have the option to use HyperText Markup Language (HTML) tags. This way, you employ less code and keep your page size down so that your website loads faster in a browser window. Use your text editor program and the HTML marquee tag to animate the text the way you would like.

1

Start your text editor program and launch an HTML document.

2

Type in the content that you want to animate.

3

Enter an opening "<marquee>" tag at the beginning of the sentence and type a closing "</marquee>" element at the end. The marquee code causes the content to initially scroll horizontally across the page. Type your HTML code as follows:

<marquee>This is the animated sentence.</marquee>

4

Type "behavior=" inside the first marquee tag and then enter "Scroll" or "Slide" after the equals sign to specify how the text animates. A scroll produces a continuous horizontal or vertical movement, while the slide makes the content move on the page just once. Enter the HTML like the following example:

<marquee behavior="scroll">This is the animated sentence.</marquee>

5

Enter "direction=" after the behavior attribute to determine the direction that the content moves. Type "right", "left", "up", or "down" as such:

<marquee behavior="scroll" direction="right">This is the animated sentence.</marquee>

6

Save your file to preserve your changes.

About the Author

Brandy Alexander has been writing professionally since 2001. She is a glass artist with a Web design and technical writing background. Alexander runs her own art-glass business and has been a contributor to "Glass Line Magazine" as well as various online publications.

Photo Credits

  • photo_camera futuregirl #4 image by Ralf Kraft from Fotolia.com