HTML Marquee Tag

You might have come across animated text or images on many websites for example text moving continuously across the screen or image bouncing back,forth, left or right across the screen automatically. All this can be made possible using marquees. There are many ways to animate text with the marquee tag in HTML.

Marquee Attributes List

The below table contains Marquee Attributes and their description which is supported by HTML version.

Attribute NameAttribute ValueAttribute Description
directionleftit moves text left
directionrightit moves text right
directionupit moves text up
directiondownit moves text down
behaviorscrollit scrolls text
behaviorslideit slides text
behavioralternateit bounces text back & forth
loopnumbernumber of the loops
scrolldelaymillisecondsit sets the delay
scrollamountpixelsit sets the amount of movement

Syntax

<form>
	<marquee>Left marquee</marquee>
</form>

Left Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Left Marquee Example</title>
</head>
<body>
<marquee>Left marquee</marquee>
</body>
</html>

This will produce following result

Left marquee

Right Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Right Marquee Example</title>
</head>
<body>
<marquee direction="right">Right marquee</marquee>
</body>
</html>

This will produce following result

Right marquee

Up Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Up Marquee Example</title>
</head>
<body>
<marquee direction="up">Up marquee</marquee>
</body>
</html>

This will produce following result

Up marquee

Down Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Down Marquee Example</title>
</head>
<body>
<marquee direction="down">Down marquee</marquee>
</body>
</html>

This will produce following result

Down marquee

Scroll Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Scroll Marquee Example</title>
</head>
<body>
<marquee behavior="scroll">Scroll marquee</marquee>
</body>
</html>

This will produce following result

Scroll marquee

Sliding Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Sliding Marquee Example</title>
</head>
<body>
<marquee behavior="slide">Slide marquee</marquee>
</body>
</html>

This will produce following result

Slide marquee

Alternate Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Alternate Marquee Example</title>
</head>
<body>
<marquee behavior="alternate">Alternate marquee</marquee>
</body>
</html>

This will produce following result

Alternate marquee

Loop Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Loop Marquee Example</title>
</head>
<body>
<marquee loop="3">scroll loop 3 times</marquee>
</body>
</html>

This will produce following result

scroll loop 3 times

Scrolldelay Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Scrolldelay Marquee Example</title>
</head>
<body>
<marquee scrolldelay="350">SCROLLDELAY 350 </marquee>
</body>
</html>

This will produce following result

SCROLLDELAY 350

Scrollamount Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Scrollamount Marquee Example</title>
</head>
<body>
<marquee scrollamount="10">SCROLLAMOUNT equals 10</marquee>
</body>
</html>

This will produce following result

SCROLLAMOUNT equals 10

Image Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>Image Marquee Example</title>
</head>
<body>
<marquee direction="right"><img src="http://www.techstrikers.com/images/bird_c.gif" ></marquee>
</body>
</html>

This will produce following result

Background Marquee Example

<!DOCTYPE html>
<html>
<head>
<title>My HTML Text Tag Example</title>
</head>
<body>
<font color="Brown"><marquee direction="left" style="background:YELLOW">www.techstrikers.com</marquee></font>
</body>
</html>

This will produce following result

www.techstrikers.com

See Also

HTML Form Tags
HTML Page Formating Tags
HTML Other Tags


 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.