In this article we will learn how to get a marquee feature without a marquee tag in HTML5. You can also move an image across the screen.
Today I have prepared something really entertaining. Of course, we implement it with our favorite HTML5.
In this animation, the x-coordinate value of the banner decreases as the banner moves from right to left. The screen is cleared between position changes.
Step 1
First of all we will create a "moveBanner()" method inside the script tag.
function moveBanner() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Clear the screen
ctx.clearRect(0, 0, 500, 100);
// Display the text in the new position
ctx.fillText("MCN Solutions", X, 50);
X -= 3;
// If the banner has reached the left end of the screen, resent the x-coordinate
if (X < -30)
X = 500
}
}
Step 2
In the movebanner() method we will clear the screen using:
ctx.clearRect(0, 0, 500, 100);
Step 3
In my next step, in the movebanner() method we will display the text at a new position using:
ctx.fillText("MCN Solutions", X, 50);
X -= 3;
Step 4
In the movebanner() method, we will next check if the banner has reached the left end of the screen, and if it has then we will reset the x-coordinate. See:
if (X < -30)
X = 500
We must call the moveBanner() function repeatedly at regular intervals. We will use the setInterval() method for this. The setInterval takes the following 2 parameters:
- The function that is to be called at regular intervals
- The interval in microseconds
Step 5
Now we will create the "init()" method:
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Set the banner text attributes
ctx.fillStyle = "red";
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 3;
ctx.shadowColor = "grey";
ctx.font = "30px verdana";
// Call the moveBanner() function repeatedly every 40 microseconds
setInterval(function () { moveBanner() }, 40)
}
}
In this method we will set the color of the text attribute and at last we must call the moveBanner() function repeatedly at regular intervals. We will use the setInterval() method for this. The setInterval takes 2 parameters:
- The function that is to be called at regular intervals
- The interval in microseconds.
setInterval(function () { moveBanner() }, 40)
Now we will call the moveBanner() function every 40 microseconds.
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="application/javascript">
var X = 600;
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Set the banner text attributes
ctx.fillStyle = "red";
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 3;
ctx.shadowColor = "grey";
ctx.font = "30px verdana";
// Call the moveBanner() function repeatedly every 40 microseconds
setInterval(function () { moveBanner() }, 40)
}
}
function moveBanner() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Clear the screen
ctx.clearRect(0, 0, 500, 100);
// Display the text in the new position
ctx.fillText("MCN Solutions", X, 50);
X -= 3;
// If the banner has reached the left end of the screen, resent the x-coordinate
if (X < -30)
X = 500
}
}
</script>
<title>Moving Banner</title>
</head>
<body onload="init();">
<canvas id="canvas" width="500" height="100" style="border: 2px solid black;"></canvas>
</body>
</html>
Output
First Image
![banner.jpg]()
Second Image
![banner1.jpg]()
Third Image
![ban.jpg]()
So the banner will flow continuously.