Post
Ask Question

How to Use Marquee With HTML and JavaScript

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

  1. <marquee behavior="alternate" scrolldelay="100"><marquee width="100">  
  2.         <h5 style="color:red; font-weight: bold; font-size: large;">Csharpcorner</h5>  
  3.      </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
  1. function scroll(pos)  
  2.     {  
  3.         var txt = "C-sharpcorner";  
  4.         var output = "";  
  5.         var screen = document.getElementById("wordscroller");  
  6.         for (var i = 0; i < pos; i++)  
  7.         {  
  8.             output += txt.charAt(i);  
  9.         }  
  10.         output += txt.charAt(pos);  
  11.         screen.innerHTML = output;  
  12.         pos++;  
  13.         if (pos != txt.length)  
  14.         {  
  15.             window.setTimeout(function () { scroll(pos); }, 200);  
  16.         }  
  17.         else  
  18.         {  
  19.             window.setTimeout(function () { scroll(0); }, 5000);  
  20.         }  
  21.     } 
Complete Program
 
Marquee.html
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.      
  6. </head>  
  7. <body>  
  8.     <h3>HTMl Marquee</h3>  
  9.     <marquee behavior="alternate" scrolldelay="100"><marquee width="100">  
  10.         <h5 style="color:red; font-weight: bold; font-size: large;">Csharpcorner</h5>  
  11.      </marquee></marquee>  
  12.     <h3>JavaScript Marquee</h3>  
  13.        <p id="wordscroller" style="color: #0000FF; font-weight: normal; font-size: x-large"></p>  
  14. <script type="text/javascript">  
  15.     
  16.     function scroll(pos)  
  17.     {  
  18.         var txt = "C-sharpcorner";  
  19.         var output = "";  
  20.         var screen = document.getElementById("wordscroller");  
  21.         for (var i = 0; i < pos; i++)  
  22.         {  
  23.             output += txt.charAt(i);  
  24.         }  
  25.         output += txt.charAt(pos);  
  26.         screen.innerHTML = output;  
  27.         pos++;  
  28.         if (pos != txt.length)  
  29.         {  
  30.             window.setTimeout(function () { scroll(pos); }, 200);  
  31.         }  
  32.         else  
  33.         {  
  34.             window.setTimeout(function () { scroll(0); }, 5000);  
  35.         }  
  36.     }  
  37.     scroll(0);  
  38. </script>  
  39. </body>  
  40. </html> 
Output
 
Ani.gif
 
For more information, download the attached sample application.


Similar Articles