Animated Texts

The moving line of texts that you see on the header area of this blogsite is made possible by the <marquee> code. This code has many attributes that determines the motion, height, width, behavior and direction of the moving texts. The default direction of the text is from right to left. This motion also corresponds to the way we read texts in Roman alphabet. Although moving or animated texts can be eye-catching, avoid using them in your blogs. Animated texts can be distractive and irritating to some readers. Below are some examples of animated texts with corresponding codes.

SOME EXAMPLES OF ANIMATED TEXTS:

(NOTE: Depending on the speed of your internet connection, it may take some time before you can view the animated texts. Please allow the page to fully load.)

1. Running Texts

This text is an example of a simple running text created by using the basic marquee code.
CODES:<marquee bgcolor="#FDD017">"TEXTS" </marquee>


2. Bouncing Texts

This is an example of bouncing text effect.
CODES: <marquee behavior="alternate" bgcolor="#FDD017">"TEXTS"</marquee>


3. Scrolling Texts:

This example demonstrates the scroll text effect with upward direction. Simply specify the direction that you prefer.

This example also demonstrates the scroll delay and size attributes of the marquee code.

CODES: <marquee scrolldelay="250" direction="up" width="200px" height="100px" bgcolor="#FDD017" onmouseover="this.stop()" onmouseout="this.start()">"TEXTS" </marquee>


You may experiment on the different attributes of the marquee code to accomplish the best results that you desire. Basically, the attributes of this code include the direction, background color, behaviour, size, speed and font color. The last example demonstrates a lot of attributes of the marquee code.

To review, here are some of the basic attributes of the <marquee> code:

scrolldelay="number" - this determines the speed of the texts; the higher the number, the slower is the speed (the default speed is 85).

behavior="(scroll, alternate, slide)" - specifies the motion pattern of the texts.

direction="(up, down, left, right)" - specifies the direction of motion of the texts.

bgcolor="hexadecimal" - specifies the color of the background; this is expressed in hexadecimal codes. For specific color codes, refer to this site: HTML Colors.

width and length ="number" - expressed in terms of pixels; specifies the area container of the texts (the default area of the moving texts is the section wrapper).

onmouseover="this.stop()" onmouseout="this.start()" - this code stops the motion of the texts when the mouse arrow is pointed or hovers over the animated texts.