Recreating the Fade Scrolling Text Marquee on Twitter

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

Scrolling marquees were widely used on many early webpages that used the now defunct non-standard marquee tags and have fallen out of vogue in recent years. The twitter.com homepage show that the effect can still be used to good effect today in a more subtle manner. We can use client side scripting to create the effect without the use of proprietary tags.

Taking a look at the twitter homepage code show us how they make the text fade in and out, it is remarkably simple. They have placed two PNG images that fade from 100% opaque to 100% transparent, it’s actually a single sprite called fade-trends2.png. The two elements are placed inside their own <li>s at the end of a list of <li>s and inside a <ul>, and then positioned using CSS to float at either side of the <ul>.

We can recreate the same thing ourselves using jQuery. An example is show below:

Scrolling marquee that fades in and out as seen on the twitter.com homepage.

1. Create a fade image of our own

You can use the fade-image.png I have created for this example or create your own. Their fader image is for a specific colour scheme, so you will have to make your own to match your own colour scheme. The image has the same width as the twitter one i.e. 120px wide. It is a single 120px-wide image sprite that fades from 100% opacity (solid colour) at the left edge to 0% opacity (transparent) in the middle to 100% opacity (solid colour) at the right edge. If you change the image dimensions, you will need also to change the CSS. The height does not matter because it is repeated on this axis.

2. Some CSS

div#marquee {
  position:relative;
  overflow:hidden;
  background-color:#A5CC7A;
  color:#fff;
}
div#marquee div.scrollingtext {
  position:relative;
  display:inline;
  white-space:nowrap;
}
div#marquee div.fader {
  width:60px;
  position:absolute;
  background:url(/images/fade-image.png) repeat-y scroll 0 0 transparent;
  top:0;
  left:0;
}
div#marquee div.fader.left {
  background-position:-60px 0;
  left:auto;
  right:0;
}

3. Create a Marquee class

var Marquee = function(j,s,w) {
   var self = this;
   var jTarget = j;
   var strText = s;
   var intWidth = w;
   var intPaddingLeft = 60;
   var jText,intTextWidth;
   var update = function() {
     intPaddingLeft -= 2;
     if (intPaddingLeft < -intTextWidth) {
         intPaddingLeft += intTextWidth;
     }
   jText.css({'left':intPaddingLeft + 'px'});
   };
   var setup = function() {
     jText = $('<div class="scrollingtext"></div>').text(strText);
     jTarget
       .append(jText)
       .append($('<div class="fader"></div>').html('&nbsp;'))
       .append($('<div class="fader left"></div>').html('&nbsp;'));
     intTextWidth = $(jTarget).find('.scrollingtext').width();
     jTarget.width(intWidth);
     jText.text(strText + " " + strText);
     update();
   };
   setup();
   setInterval(update,30);
   return self;
};

The class returns a Marquee object with no public methods to keep it simple. You may want to add some public methods (for example, as stop() method or restart() method) if you wanted to add links into the marquee.

This class comes from code originally found on stackoverflow.com

Note: You will also need to include the jQuery library for this to work. Either include your local version or use the google hosted version before your new marquee class.

4. The HTML

This bit is simple all we need to do here is include an empty div in the body of our HTML document where we want our scrolling marquee to appear.

<div id="marquee"></div>

3. Calling the class and populating the marquee

strLoremIpsum = “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis diam magna, vel ultrices orci. Nunc et fringilla dolor. Cras at nibh tortor. Aenean sit amet nisi metus. Proin aliquam, dui scelerisque lobortis aliquet, urna nunc vestibulum erat, in lobortis neque enim et odio. In nibh orci, molestie vitae interdum non, rhoncus sed tellus. Nam vitae orci nulla. Fusce feugiat, augue condimentum consequat semper, lacus tellus aliquam velit, nec lacinia orci neque a diam…”;

jQuery(function($) {
  myMarquee = new Marquee($('div#marquee'),strLoremIpsum, 450);
});

The number at the end, in this example 450, sets the width of the scroller div.

This article was posted on 19 November 2010 in CSS, Javascript, jQuery, Tutorials

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.