Create the marquee text effect using JavaScript - GeeksforGeeks

17 Mar, 2021
In this article, we will be creating marquee text using JavaScript. This effect can be achieved using the <marquee> tag, but the marquee has been deprecated and the new websites do not use this tag. Still some browsers support this tag but to be on the safe side you should not use this tag. Here is the example below of how the marque tag works.
Example: In this example we will use the HTML marquee tag.
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>Marquee tag example</title></head>  <body>    <marquee>        GeeksForGeeks | A computer science portal for geeks    </marquee>    <br><br><br><br>    <marquee direction="right">        GeeksForGeeks | A computer science portal for geeks    </marquee>    <br><br><br><br>    <marquee direction="up">        GeeksForGeeks | A computer science portal for geeks    </marquee>    <br><br><br><br>    <marquee direction="down">        GeeksForGeeks | A computer science portal for geeks    </marquee>  </body>  </html>
Output:
Note: Do not use the marquee tag inside your code because it is deprecated and can break your code in the future.
Using Javascript : To avoid the deprecation of the marquee tag you can implement your own JavaScript code to achieve this effect. First, we create an HTML skeleton. Create a div tag and inside the div tag create some <p> tags that hold your text. 
HTML Code:
HTML
<!DOCTYPE html><html><body>    <div id="main">        <p class="para" id="para1">            Geeksforgeeks |             A computer science portal for geeks        </p>          <p class="para" id="para2">            This is another text        </p>          <p class="para" id="para3">            This is the third line of the             example line of the example.        </p>      </div></body>  </html>
CSS Code: Now add some CSS to the code. Here in the wrapper div (In which all the <p> tags reside) make the overflow hidden (This is necessary) and set the background color, border, width of your choice. And in the <p> tag there should be three necessary properties white-space, float, and clear. The white-space should be set to nowrap, float to be left, and clear to be both and other designing properties of your choice.
CSS
<style>  #main{      border: 1px solid;      background: yellow;      width: 100%;      overflow: hidden;     }      .para{      color: black;      font-weight: bold;      white-space: nowrap;      clear: both;      float: left;    }</style>
JavaScript Code: Now the main part of adding logic to move the text. What we do is decrease the margin-left property of the <p> elements, When the element becomes invisible we again assign the margin-left equal to the width of the parent element of the <p> element. These are the step-by-step process to implement this logic.
Create a variable named elementWidth and assign the offsetWidth of the <p> element
Create a variable name parentWidth and assign the offsetWidth of the parent element of the <p> element.
Create flag variable and initialize it with 0
Create a setInterval with a 10-millisecond refresh rate.
At every Interval decrease the flag value and set that value to the margin-left property.
If the negative value of the flag is equal to the element’s width then set the value of margin-left equal to the parent’s width.
Javascript
const para1 = document.getElementById("para1");const para2 = document.getElementById("para2");const para3 = document.getElementById("para3");  animate(para1);animate(para2);animate(para3);  function animate(element) {    let elementWidth = element.offsetWidth;    let parentWidth = element.parentElement.offsetWidth;    let flag = 0;      setInterval(() => {        element.style.marginLeft = --flag + "px";          if (elementWidth == -flag) {            flag = parentWidth;        }    }, 10);}
Output: After combining above three section we will see something like this.
CSS-Properties
HTML-Tags
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)