Introduction
This article explains how to use a marquee with HTML and JavaScript. A marquee is used to move text from right to left, left to right, up and down and down and up.
HTML Marquee
<marquee behavior="alternate" scrolldelay="100"><marquee width="100">
<h5 style="color:red; font-weight: bold; font-size: large;">Csharpcorner</h5>
</marquee></marquee>
Marquee Type
Right to left:
<marquee>Csharpcorner</marquee>
Left to right:
<marquee direction="right">Csharpcorner</marquee>
Down and up:
<marquee direction="up">Csharpcorner</marquee>
Up and down:
<marquee direction="down">Csharpcorner</marquee>
JavaScript Marquee Funcation
function scroll(pos)
{
var txt = "C-sharpcorner";
var output = "";
var screen = document.getElementById("wordscroller");
for (var i = 0; i < pos; i++)
{
output += txt.charAt(i);
}
output += txt.charAt(pos);
screen.innerHTML = output;
pos++;
if (pos != txt.length)
{
window.setTimeout(function () { scroll(pos); }, 200);
}
else
{
window.setTimeout(function () { scroll(0); }, 5000);
}
}
Complete Program
Marquee.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h3>HTMl Marquee</h3>
<marquee behavior="alternate" scrolldelay="100"><marquee width="100">
<h5 style="color:red; font-weight: bold; font-size: large;">Csharpcorner</h5>
</marquee></marquee>
<h3>JavaScript Marquee</h3>
<p id="wordscroller" style="color: #0000FF; font-weight: normal; font-size: x-large"></p>
<script type="text/javascript">
function scroll(pos)
{
var txt = "C-sharpcorner";
var output = "";
var screen = document.getElementById("wordscroller");
for (var i = 0; i < pos; i++)
{
output += txt.charAt(i);
}
output += txt.charAt(pos);
screen.innerHTML = output;
pos++;
if (pos != txt.length)
{
window.setTimeout(function () { scroll(pos); }, 200);
}
else
{
window.setTimeout(function () { scroll(0); }, 5000);
}
}
scroll(0);
</script>
</body>
</html>
Output
![Ani.gif]()
For more information, download the attached sample application.