How to marquee any text

Dear reader sometime we saw a text line running from one side to another side. This kind of text animation make our blog more attractive to visitor. Today we will learn how to make any text running from one side to another side. It is called 'Marquee' effect.

There are many way to do this kind of text effect. Actually we need to add some code before a sentence or word. The code will run or alternate any direction mentioned in html code.

1. one side to another side.

<marquee behavior="scroll" direction="left">Here is the running text</marquee>

Preview:
Here is the running text

In the same way if you change direction="left" 'right' then the text will change it direction. Look at the code below.

Here is the right side running text

If you don't add any direction code then text will run to left side.
code:
<marquee>a text without direction code</marquee>
preview:
a text without direction code
In this code only 'marquee' is written at the start side of text.



2. Altarnating side of running text.
code:
<marquee behavior="alternate">Write your alternating text here</marquee>
preview:
Write your alternating text here

3. Running text to upside or downside.
code:
<marquee behavior="scroll" direction="up">This is a upgoing text</marquee>
result:
This is a upgoing text

In the same way change the direction="up" to 'down'. Your text will go downside.
code:
<marquee behavior="scroll" direction="down">text running to downside</marquee>
result
text running to downside
5. Control speed of marquee text.
code:
<marquee behavior="scroll" direction="left" scrollamount="1">slower sentence</marquee>

<marquee behavior="scroll" direction="left" scrollamount="10">quite speed text</marquee>


<marquee behavior="scroll" direction="left" scrollamount="20">speedy text</marquee>

result will look like:
slower text

quite speed text

speedy text

Marqueeing a image
1. Only marqueeing a image.

<marquee behavior="scroll" direction="left"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkuTOF9MEO4ZIUxBj7AvlcmnG6uKWLkmfwc7EQ3ogzZATD4nIXg0Qwo7bjYvdHXAjPguwiYr38GhE3FIC3Djy9M7QsUc0wNK531BGQpkCGTp9D0vWR8rNWrdhR5tPgOeAM0ffh-Mml8oGf/s320/10001.gif" width="20" height="20" alt="Net Gator"/></marquee>
Result:


2. Adding image in a running text
If we want to add a image in a running text that is very easy to do.
Here is the code:
<marquee width="30%">Running text and image<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkuTOF9MEO4ZIUxBj7AvlcmnG6uKWLkmfwc7EQ3ogzZATD4nIXg0Qwo7bjYvdHXAjPguwiYr38GhE3FIC3Djy9M7QsUc0wNK531BGQpkCGTp9D0vWR8rNWrdhR5tPgOeAM0ffh-Mml8oGf/s320/10001.gif" HEIGHT=20 WIDTH=20 ALT="Net Gator"></marquee>
Result:
Running text and image from a specific area of webpage

Running image and text from other side of a webpage:
This is a text

To do it just remove 'width="30%" from the code above.

3. Running text below of a image.

<marquee behavior="scroll" direction="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkuTOF9MEO4ZIUxBj7AvlcmnG6uKWLkmfwc7EQ3ogzZATD4nIXg0Qwo7bjYvdHXAjPguwiYr38GhE3FIC3Djy9M7QsUc0wNK531BGQpkCGTp9D0vWR8rNWrdhR5tPgOeAM0ffh-Mml8oGf/s320/10001.gif" width="20" height="20" alt="Net Gator"/><p>This is the text below of a image</p></marquee>

result:-

This is the text below of a image

Stopping a marquee text
1. Marqueeing will stop when you click your mouse pointer on that text

<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">To stop marquee click your mousepointer here</marquee>

Result:
To stop marquee click your mousepointer here

2. Stopping text marquee by hovering mouse pointer.

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">To stop marquee place your mousepointer here</marquee>
Result:
To stop marquee place your mousepointer here

Now you know all the codes and implementations of Marquee effect in a webpage or blogger.com blog.