Scrolling Text In HTML

In this article I tell you how to scroll text in HTML.
  • 4243

Introduction

In this article I tell you how to scroll text in HTML. You can create scrolling text in HTML using marquee tags. You can move your text from right to left, left to right, bounce back and forth, and make it scroll up or down.

Syntax

<MARQUEE command parameters>
Scrolling Text
</MARQUEE>

Command Parameters are:

Command Parameter Description
align="top | middle | bottom" Alignment of ordinary text.
  • top: aligns surrounding text to the top of the marquee boundary.
  • middle: aligns surrounding text to the middle of the marquee boundary.
  • bottom: aligns surrounding text to the bottom of the marquee boundary.
behavior="alternate | scroll | slide" Specifies the way in which the text within the marquee will display.
  • alternate: text appears to move from side to side within the boundaries of the marquee.
  • scroll: text begins off screen and scrolls toward the opposite side until it disappears off screen again before repeating.
  • slide: text moves in from off screen, moves toward the opposite boundary of the marquee, and stops when it encounters the boundary.
bgcolor="named color | color value" Specifies background color within marquee. Named color is the name of color like blue, green, red etc. Color value is hexadecimal number represents the color like FFFFFF represents white color.
direction="left | right" Specifies initial direction in which the marquee text will move.
height|width="% | pixels" Specifies height and/or width of the marquee
hspace|vspace="pixels" Specifies horizontal and/or vertical standoff which surround the marquee and define the amount of white space between the boundaries of the marquee and surrounding normal text, respectively.
scrollamount="pixels" Specifies number of pixels by which each iteration of the scrolling display is incremented.
scrolldelay="milliseconds" Specifies integer number of milliseconds which elapse between successive iterations of the scrolling display. Smaller numbers produce more rapid scrolling effects.

Example:

Scroll Text Left to Right

To make your text scroll left to right, use behavior="scroll" and direction="right".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>Scrolling Text</title>

</head>

<body>

<h1>Scrolling Text From Left To Right</h1>

<marquee behavior="scroll" direction="right">

<h1>

Welcome to .NET Heaven</h1>

<h4>

A reference website for students and beginners</h4>

</marquee>

</body>

</html>

 

Output:

 

Image 1
 

Marquee01.jpg


Image 2


Marquee02.jpg

 

Image 3

 

Marquee03.jpg


Example

 

Run following code snippet and see the output. Output will be very interesting.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>Scrolling Text</title>

</head>

<body>

<h1>Scrolling Text </h1>

<marquee behavior="scroll" direction="left" scrollamount="1">Very slow...</marquee>

<marquee behavior="scroll" direction="left" scrollamount="10">Faster...</marquee>

<marquee behavior="scroll" direction="left" scrollamount="20">Fast...</marquee>

<marquee behavior="scroll" direction="left" scrollamount="50">Lightning!</marquee>

</body>

</html

© 2020 DotNetHeaven. All rights reserved.