JavaScript marquee

In order to emulate the proprietary IE marquee tag with JavaScript, we need only one thing: timers. Timers come in the form of the setInterval() and setTimeout() global functions. In this post I'm going to show you how to create a simple marquee effect to be added to our pages. First of all, let's start with a basic markup structure:

<div id="container">

  <span id="marquee">Test</span>

</div>

Now let's create an object to be used as our marquee wrapper:

var Marquee = {
  // ...
};

First, we need a DOM reference to our marquee element:

var Marquee = {

  element: document.getElementById('marquee'),
  
  // ...
};

The we need two methods, one for moving the text from one side to the other and one for making this animation enter into an infinite loop. Let's start with the former, that we're going to call run():

//...

run: function() {
  
    var counter = 0;
    var counter2 = 400;
    
    var interval = window.setInterval(function() {
    
      counter += 1;
      
      if(counter == 400) {
      
        window.clearInterval(interval);
        
        
        
        
        var interval2 = window.setInterval(function() {
        
          
          counter2 -= 1;
          
          Marquee.element.style.left = counter2 + 'px';
          
          if(counter2 == 0) {
          
            window.clearInterval(interval2);
            
       
           
          
          
          }
        
        
        }, 25);
      
      }
      
      Marquee.element.style.left = counter + 'px';
      
    
    
    
    }, 25);
    
     
  
},

// ...

Two counters, two timers. The first counter is set to 0 and it will be incremented up to 400, while the second is set to 400 and it will be decremented up to 0. The first timer moves our marquee element to the left by incrementing its left CSS property, while the second moves it back to the original position by decrementing its left property. Obviously each timer will use its proper counter. When a counter reaches its target value, then the timer is reset.

The overall duration of this first animation is 20,000 milliseconds, that is 25 * 400 * 2, because our counters will be incremented by 1 each 25 milliseconds, so we have 400 counters and 25 milliseconds for each counter. We have to multiply this value by 2 because our animation is made up of two parts, one left-to-right and one right-to-left. This duration will be used in our final method, which is called marquee():

marquee: function() {
  
  window.setTimeout(function() {
  
    Marquee.run();
    
    window.setTimeout(arguments.callee, 20000);
  
  }, 25);
}

This method makes our animation enter into an infinite loop simply because it calls itself by invoking setTimeout() with a self-reference. Note that the duration for this call is set to 20,000 milliseconds, that is, the overall duration specified earlier. You can see the demo below.

Demo

Live demo