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

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