Marquee Technique: Style Text Or Image On Your Site To Move

I'm sure you knew already about and must have ever found such a text style. It's not hard to make that text style, not at all. You can even make it by only using a simple Html code, but sure you have also a option to add a specific attributes to manage the text. The element (or maybe form) here is called "Marquee" effect, just like the title i wrote. You can style your text or even image on your site to move continuosly from left to right, or up to down, and vice versa. Here is an example to make it using a standard Html code.

< marquee>Your Text Here< /marquee>

The above code will result in the below effect.

Example Text With Marquee Effect

While the attributes to manage the text are various.

* bgcolor="color value" " It functions to specify the background color of the text.

* direction="left/right/up/down" " It functions to specify if the text is to running towards up, bottom, right, or left.

* behavior="scroll/slide/alternate" " It functions to specify the behavior of the text.

The Scroll value will result in the text to move around.

The Slide value will result in the text to move once and then stopped.

The Alternate value will result in the text to move left and back and forth.

* title="Message" " A message will display when mouse is above the text.

* scrollmount="Number Value" " It will specify how fast the text will move. The higher value, the faster motion.

* scrolldelay="Number Value" " It will specify if the text is to stop up in a period as specified by the value or otherwise keep moving without delay. The value is specified in

* loop="number|-1|infinite" " It will specify the amount of loop.

* width="width value" " Specified by pixel or percent.

Here is an example.

< marquee bgcolor="#f0f0f0" align="center" direction="left" height="100" width="50%" scrollamount="2">Example: Text move towards left< /marquee>

The above code will result in the below effect.

Example: Text move towards left

Additional Example. Specify the text's type.

< div align="center"> < font face="georgia" color="black"> < strong> < marquee bgcolor="#f0f0f0" width="50%" scrollamount="2" behavior="alternate"> < /marquee>< /strong> < /font>< /div>

The above code will result in the below effect.

Out of the above, Marquee command will also work well with some javascript codes. Like this one: onmouseover="this.stop()" onmouseout="this.start()" - That two js commands will set the text stops moving when mouse is pointed to the text, but will move again after the mouse taken off.

Here is an example.

< marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="left" width="50%" height="100" align="center">Your Text Here< /marquee>

The above code will result in the below effect.

Point Your Mouse Here

Lastly, you can also style links using this Marquee form.

Here is an example.

< marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#f0f0f0" scrollamount="2" direction="left" width="50%" height="100" align="center"> < a href="Your Url Here">Your Anchor Here< /a> < b r / > < a href="Your Url Here">Your Anchor Here< /a> < b r / > < a href="Your Url Here">Your Anchor Here< /a> < /marquee> < marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#f0f0f0" scrollamount="2" direction="right" width="50%" height="100" align="center"> < a href="Your Url Here">Your Anchor Here< /a> < b r / > < a href="Your Url Here">Your Anchor Here< /a> < b r / > < a href="Your Url Here">Your Anchor Here< /a> < /marquee>

The above code will result in the below effect.

Blogger's Custom Mobile Template
Verify Your Authorship To Google
How To Create Or Set Up Facebook Open Graph?

Featured Content Widget Blogger
Adding Google Plusone +1 Button
Remove Any Duplicate Content