Create Different Styles of Marquee in Html and JavaScript

Marquee Tags are elements of Html which are used to scrolling and sliding text and images in web designing. Most of the time you see latest news scrolling in different websites these are scrolling due to marquee tags. There are different styles of marquee in Html, like scroll from left to right or right to left and from top to bottom or bottom to top, designers use different styles according to their needs. I am going to discuss all styles and types of marquee one by one below.

Simple Scrolling Marquee :

<marquee>This is Simple HTML Marquee Tag</marquee>

In above code I write a simple marquee tag. We add some marquee attributes in opening tag to give different styles to it, like direction, behavior ,bgcolor, loop, scrollamount and some others.

<marquee behavior=”scroll” direction=”left” scrollamount=”3″ bgcolor=”yellow”>This is Simple Scrolling Marquee which is moving from right to left.</marquee>

Output of above Code :

This is Simple Scrolling Marquee which is moving from right to left.

Direction : direction tells the direction on which you want to scroll e.g left, right, up or down.

Scrollamount : This attribute define a speed of marquee. More value means higher the speed.

Behavior : It describes behavior of marquee e.g scrolling, slides or alternate etc.

Alternate Behavior of Marquee :

<marquee behavior=”alternate” direction=”right” bgcolor=”pink”>This is Simple alternate Marquee which is moving from right to left and left to right.</marquee>

Output :

This is Simple alternate Marquee which is moving from right to left and left to right.

Other Examples :

Using marquee with loop and sliding behavior:

<marquee behavior=”slide” direction=”right” bgcolor=”orange” loop=”5″ scrollamount=”10″>This is Simple sliding Marquee with loops.</marquee>

Output :

This is Simple sliding Marquee with loops.

Using Marquee with directions up and down and involve height and width with it.

<marquee behavior=”scroll” direction=”up” bgcolor=”yellow” scrollamount=”5″ width=”200px” height=”100px”>This is another example, In which text is moving from bottom to top.</marquee>

Output :

This is another example, In which text is moving from bottom to top.

Moving marquee in reverse direction :

<marquee behavior=”scroll” direction=”down” bgcolor=”orange” scrollamount=”6″ width=”200px” height=”100px”>This is another example, In which text is moving from top to bottom.</marquee>

Output :

This is another example, In which text is moving from top to bottom.

Use Marquee to Scroll Images :

You can insert any type of Html code between <marquee> tags, like images, links, headings or anything you want to see in scrolling behavior. for example I show you how we scroll images in marquee in the given example.

<marquee behavior=”scroll” direction=”right”><img src=”http://domain/wp-content/uploads/2013/07/rose-flower1.jpg”/> <img src=”http://domain.com/wp-content/uploads/2013/07/rose-flower2.jpg”/><img src=”http://domain.com/wp-content/uploads/2013/07/rose-flower3.jpg”/></marquee>

Output :

Marquee in JavaScript with Start and Stop Events :

With the combination of javascript codes we add some extra features in simple html marquee. When you hover text it stops scrolling and when mouse out, it again start scrolling. Example is given below.

<font size=”12″ color=”red” ><marquee behavior=”scroll” bgcolor=”yellow” onmouseout=”this.start();” onmouseover=”this.stop();”>This is simple marquee text in JavaScript. Hover Mouse in the text and see results.</marquee></font>

Output :

This is simple marquee text in JavaScript. Hover Mouse in the text and see results.

Html and JavaScript Marquee in Typing Style :

Computer typing style marquee is very rarely used but it is very beautiful, one word type after the other in a sequence. This will created using JavaScript. Example is given below.

<html>

<head>

<title>Marquee in Typing Style</title>

<SCRIPT>

var i = 0

var showString= “This is a Computer Typing Text Style Marquee Example, The words are show in typing style here. ”

+ “one letter after another. This is Used for displaying Latest News in Websites and blogs.”

function marquee()

{

var stringLength= showString.length

document.show.marquee1.value= document.show.marquee1.value + showString.charAt(i)

i++ //Copy and paste this same code below each other to increase the letter typed out at one time

var timeID= setTimeout(“marquee()”,50) //Change the number to change the speed (the smaller, the faster)

if (i >= stringLength)

{clearTimeout(timeID); i=0}

}

</SCRIPT>

</head>

<body onLoad=”marquee()”>

<CENTER>

<FORM name=”show”><TEXTAREA rows=5 cols=53 wrap=”virtual” name=”marquee1″></TEXTAREA></FORM></CENTER>

</body>

</html>

Output :

To see the output of above code Click here.

Final Words :

I hope you learn marquee tags completely now, you can use different combinations of all attributes to give amazing styles to your marque according to your needs and requirements. I will teach you marquee in css3 in later posts. For now your assignment is to copy above codes in your notepad and run it in your browsers. If you need any help regarding this lesson, your quarries are welcome below in comment section.