Post
Ask Question

How to Get Marquee Feature Without Marquee Tag in HTML5

Introduction

 
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.
  1. function moveBanner() {  
  2.             var canvas = document.getElementById("canvas");  
  3.             if (canvas.getContext) {  
  4.                 var ctx = canvas.getContext("2d");  
  5.    
  6.                 // Clear the screen  
  7.                 ctx.clearRect(0, 0, 500, 100);  
  8.    
  9.                 // Display the text in the new position  
  10.                 ctx.fillText("MCN Solutions", X, 50);  
  11.                 X -= 3;  
  12.    
  13.                 // If the banner has reached the left end of the screen, resent the x-coordinate  
  14.                 if (X < -30)  
  15.                     X = 500  
  16.             }  
  17.         } 
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:
  1. function init() {  
  2.             var canvas = document.getElementById("canvas");  
  3.             if (canvas.getContext) {  
  4.                 var ctx = canvas.getContext("2d");  
  5.    
  6.                 // Set the banner text attributes  
  7.                 ctx.fillStyle = "red";  
  8.                 ctx.shadowOffsetX = 4;  
  9.                 ctx.shadowOffsetY = 4;  
  10.                 ctx.shadowBlur = 3;  
  11.                 ctx.shadowColor = "grey";  
  12.                 ctx.font = "30px verdana";  
  13.    
  14.                 // Call the moveBanner() function repeatedly every 40 microseconds  
  15.                 setInterval(function () { moveBanner() }, 40)  
  16.             }  
  17.         } 
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
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <script type="application/javascript">  
  7.    
  8.         var X = 600;  
  9.    
  10.         function init() {  
  11.             var canvas = document.getElementById("canvas");  
  12.             if (canvas.getContext) {  
  13.                 var ctx = canvas.getContext("2d");  
  14.    
  15.                 // Set the banner text attributes  
  16.                 ctx.fillStyle = "red";  
  17.                 ctx.shadowOffsetX = 4;  
  18.                 ctx.shadowOffsetY = 4;  
  19.                 ctx.shadowBlur = 3;  
  20.                 ctx.shadowColor = "grey";  
  21.                 ctx.font = "30px verdana";  
  22.    
  23.                 // Call the moveBanner() function repeatedly every 40 microseconds  
  24.                 setInterval(function () { moveBanner() }, 40)  
  25.             }  
  26.         }  
  27.    
  28.         function moveBanner() {  
  29.             var canvas = document.getElementById("canvas");  
  30.             if (canvas.getContext) {  
  31.                 var ctx = canvas.getContext("2d");  
  32.    
  33.                 // Clear the screen  
  34.                 ctx.clearRect(0, 0, 500, 100);  
  35.    
  36.                 // Display the text in the new position  
  37.                 ctx.fillText("MCN Solutions", X, 50);  
  38.                 X -= 3;  
  39.    
  40.                 // If the banner has reached the left end of the screen, resent the x-coordinate  
  41.                 if (X < -30)  
  42.                     X = 500  
  43.             }  
  44.         }  
  45.     </script>  
  46.     <title>Moving Banner</title>  
  47. </head>  
  48. <body onload="init();">  
  49.     <canvas id="canvas" width="500" height="100" style="border: 2px solid black;"></canvas>  
  50. </body>  
  51. </html> 
Output
 
First Image
 
banner.jpg
 
Second Image
 
banner1.jpg
 
Third Image
 
ban.jpg
 
So the banner will flow continuously.


Similar Articles