HTML Marquees

Previous Page

Marquees are used to create scrollable text in web pages that can move in every possible direction. And make the text more catchy and attractive to the eyes. 

 

Attributes

Use

behavior

Marquees can either scroll or slide. This is decided by behavior. The default behavior of marquee is to scroll.

bg-color

Is used to set background colors by names or hex values.

direction

Direction decides in which direction the text is going to travel. Which is left, right, top, and bottom.

height

Height defines the height of a marquee in percent or pixels.

width

Which defines the width of the marquee in pixels or percentages.

hspace

It is used to give a horizontal margin.

vspave

It is used to give a vertical margin.

loop

It will set how many times a marquee text will scroll through your web page. By default, it will keep scrolling.

scrollamount

This is to set the amount of scrolling in intervals.

scrolldelay

This will set an interval between Scrolls.

truespeed

This will decide how fast or slow our marquee will move around the page.

 

Event Handlers:

  • onbounce :

It only runs when the marquee reaches the end of its scrolling position, and when the behavior is alternative.

  • onfinish:

It runs when the marquee is done by the amount of scrolling we set by the loop attribute; the loop has to be set on a number which is greater than zero.

  • onstart:

It starts when the marquee starts scrolling.

 

Methods:

Marquees have only two methods,

  • start():

As the name suggests it starts the scrolling of a marquee.

  • Stop():

The stop method is used to stop the scrolling of our marquee.

In this tutorial, we will create various marquee texts to understand the concepts

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Marquee </title>
	</head>
	<body>
		<marquee>  to the right  to the  left marquee</marquee>

		<marquee direction="up"> to the bottom to the  top marquee</marquee>

		<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
		
			<marquee behavior="alternate"> Bouncing marquee </marquee>

		</marquee>
	</body>
</html>
Previous Page

Treding Tutorial

Popular Tutorials

to Learn now