How to Get Marquee Feature Without Marquee Tag in HTML5

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:

1. The function that is to be called at regular intervals
2. 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.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:

1. The function that is to be called at regular intervals
2. 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">

<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.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>

<canvas id="canvas" width="500" height="100" style="border: 2px solid black;"></canvas>

</body>

</html>

Output

First Image

Second Image

Third Image

So the banner will flow continuously.

Up Next