This article will delve into the marquee event in JavaScript.
JavaScript is a robust programming language known for creating engaging and interactive web pages that enhance user experience. An often underestimated functionality used to add motion to web pages is the marquee event. This event is employed to enable elements on web pages to scroll either horizontally, vertically, or in various directions.
What is a marquee?
The marquee effect is a technique used to horizontally scroll or move elements on a webpage from right to left, left to right, as well as vertically from top to bottom and bottom to top.
Marquee event in HTML
The HTML tag used to create scrolling effects is called Marquee. Let's explore how we can implement scrolling behavior using the <marquee> tag.
Demonstration of the <marquee> tag in HTML
Example 1: In the upcoming demonstration, we are going to make use of the <marquee> placeholder tag.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Marquee tag</title>
</head>
<body>
<marquee>
Example | Online learning platform for learners.
</marquee>
<br> <br> <br> <br> <br> <br>
<marquee direction="up">
Example | Online learning platform for learners.
</marquee>
<br> <br> <br> <br> <br> <br>
<marquee direction="down">
Example | Online learning platform for learners.
</marquee>
<br> <br> <br> <br> <br> <br>
<marquee direction="right">
Example | Online learning platform for learners.
</marquee>
</body>
</html>
Output:
In the resulting display, there are four lines of text demonstrating different movements: the first line moves to the left, the second line moves to the right, the third line moves downward, and the fourth line moves upward.
Example 2: In this demonstration, we will implement the marquee effect without relying on the <marquee> tag.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee effect without using the >Marquee> tag</title>
<style>
.marquee {
white-space: nowrap;
overflow: hidden;
font-size: 24px;
color: rebeccapurple;
background-color: lavender;
animation: marquee 9s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="marquee">
<p>This is a horizontal marquee effect.</p>
</div>
</body>
</html>
Output:
The following output showcases the marquee effect where the text scrolls horizontally to the left on the web page.
Marquee event in JavaScript
Within JavaScript, programmers leverage the marquee event to generate scrolling text or images on a webpage. The marquee element was initially incorporated in HTML as a tag; however, it became outdated in the subsequent HTML version, HTML5.
JavaScript provides a method to achieve similar functionality by integrating HTML, CSS, and JavaScript to create the marquee effect.
Demonstrations of marquee events in JavaScript:
Demo 1:
To achieve a marquee effect on the webpage, we will employ HTML, CSS, and JavaScript.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Marquee event in JavaScript</title>
<style>
#marquee {
border: 2px solid;
background: antiquewhite;
width: 100%;
overflow: hidden;
}
.line {
color: crimson;
font-weight: bold;
font-size: 24px;
white-space: nowrap;
clear: both;
float: left;
}
</style>
</head>
<body>
<div id="marquee">
<p class="line" id="line1">
Example |
Online tutorial website for learners.
</p>
<p class="line" id="line2">
This is another line.
</p>
<p class="line" id="line3">
This is the third line.
</p>
</div>
<script>
const line1 = document.getElementById("line1");
const line2 = document.getElementById("line2");
const line3 = document.getElementById("line3");
animate(line1);
animate(line2);
animate(line3);
function animate(element) {
let elementWidth = element.offsetWidth;
let parentWidth = element.parentElement.offsetWidth;
let flag = 0;
setInterval(() => {
element.style.marginLeft = --flag + "px";
if (elementWidth == -flag) {
flag = parentWidth;
}
}, 10);
}
</script>
</body>
</html>
Output:
The displayed output demonstrates three lines of text moving to the left on the webpage.
Demo 2:
A marquee effect will be implemented on the text displayed on the webpage.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Marquee effect in JavaScript</title>
<style type="text/css" media="all">
#marquee {
color: darkmagenta;
font-weight: normal;
font-size: 24px;
}
</style>
</head>
<body>
<h3>Marquee in JavaScript</h3>
<p id = "marquee"></p>
<script type="text/javascript">
function scroll(n)
{
var text = "This is a marquee effect.";
var result = "";
var screen = document.getElementById("marquee");
for (var j = 0; j < n; j++)
{
result += text.charAt(j);
}
result += text.charAt(n);
screen.innerHTML = result;
n++;
if (n != text.length)
{
window.setTimeout(function () { scroll(n); }, 150);
}
else
{
window.setTimeout(function () { scroll(0); }, 4500);
}
}
scroll(0);
</script>
</body>
</html>
Output:
Below is the displayed output demonstrating the animated text on the web page.
Conclusion:
This article covers the concept of the marquee effect in JavaScript. Previously, the marquee effect in HTML was achieved using the <marquee> element, which is no longer supported in HTML5. Nowadays, to create the marquee effect, a blend of HTML, CSS, and JavaScript is utilized.