The Silky Smooth Marquee

As we abused the Internet back in the 90 with tags like <blink> and <marquee> the last 10 years have seen the gradual extinction of these proprietary tags until we did full circle and the marquee effect appears in CSS 3.

There’s actually a very strong business case and requirement for the marquee tag – since the only the alternative is often a hacky solution (I feel) that shifts the CSS left position which, depending on your browser, will begin to eat away at your CPU.

Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it’s built directly in to the browser). So let’s solve this with JavaScript.

Demo

This demonstration shows 3 jQuerified marquees and 3 standard marquees. You can see how the untouched marquees are jumpy to animate, even in the later browsers such as Firefox 3 and Safari – let alone IE6.

Demonstration of jQuery Marquee

Download

Download jQuery marquee plugin

Usage

Include the latest jQuery and the plugin file via the script tag, then:

$('marquee').marquee(optionalClass);

Note that the enhanced marquee doesn’t particularly have to apply to a marquee tag – but it is reading the effect details from the tag – currently it will default to behaviour = scroll, dir = left, speed = 2. There’s no (current) option for setting an overall default – but I’ll add this if people feel it’s required.

How it Works

There’s a few solutions available that create a similar effect, but this plugin does two things differently:

  1. Progressively enhances the marquee tag making this plugin uber easy to use.
  2. The effect is not achieved using CSS. It’s created using the overflow scroll on the element, which massively reduces the work the browser has to do – i.e. there’s no re-rendering due to changes in CSS, it’s scrolling using native functions of the browser.

It’s worth noting that behind the scenes, the marquee tag is being lifted out of the DOM and replaced with divs. However, when it’s chains in jQuery, it returns the new enhanced marquee div, so you can still hook click events, or navigate the DOM element if you wish – i.e. business as usual.

However, be warned – as we are lifting the marquee‘s contents in to a new div, it means and predefined events or data will be lost. To avoid this, make sure the marquee plugin is called before hand.

Events

The following events can be bound to:

  • stop – triggers when a loop is completed
  • start – triggers when a loop is started
  • end – completely finishes the loops if set

The follow events can be triggered by the user:

  • pause/stop (both do the same thing)
  • unpause/start (both do the same thing)

Support

I’ve written the marquee to run on a single timer function rather than one per marquee, the idea being that you could go crazy and add lots of marquees, and this code should scale.

Also, the marquee doesn’t currently support direction="up" or direction="down"…yet. Come back later and I’ll upgrade if there’s any interest.

The marquee plugin now supports all directions.

† I’ve not tested it with more than 3 marquees yet – feel free to test and give feedback

Other Uses

I’ve played around with the implementation of the marquee and I’ve been able to easily create the effect of the user clicking and dragging the marquee back and forth – which is very smooth (note that before I start the drag effect, I need to trigger a stop event):

$('div.demo marquee').marquee('pointer').mouseover(function () {
  $(this).trigger('stop');
}).mouseout(function () {
  $(this).trigger('start');
}).mousemove(function (event) {
  if ($(this).data('drag') == true) {
    this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
  }
}).mousedown(function (event) {
  $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
  $(this).data('drag', false);
});

181 Responses to “The Silky Smooth Marquee”

  1. [...] someone pointed out: the <marquee> is back. or <blink>. Well not exactly, but the w3c thinks tha this might [...]

  2. This reminds me of a project I wasted some time on awhile back called Malarquee. I used it to get my feet wet on mootools, then went running back to jQuery.

    http://www.zachleat.com/web/2007/08/20/malarquee-bringing-back-the-marquee/

    Props for giving the marquee some love!

  3. [...] Sharp gives us a blast form the past for the some Friday [...]

  4. You are indeed one sharp guy. Thanks for sharing.

  5. Any chance for RSS support ala jTicker?

  6. I’d be interested in seeing some support for vertical scrolling!

    Also any chance to have a fadein / fadeout effect???

  7. Your work saved me a huge headache. Much appreciated & Great job :)

  8. Absolutely worked as described and it is fantastic. Took processor utilization on our page from 70% using jQuery.animate, down to 5% using this tool.

    Well done

  9. Hey there,

    Thanks for the plugin. However, I would very much like support for at least direction up – this _could_ be perfect for a news scroller. As it is now I can’t use it though which is a shame.

    Let me know if it’s something you’re interested in adding, thanks.

    Oskar

  10. :( Why is there no vertical scrolling. Its performance is 10times better than anything out there but there is no direction=”up”?!

  11. Excellent work! Up/Down; oh, yes please.

  12. Hi All – I’ve now added support for direction=”up/down” – download the latest version or check out the demo at the top of this page.

  13. [...] 4. The Silky Smooth Marquee [...]

  14. Remy, excellent work. Helped us greatly as we tried to find a neat way to get a horizontal marquee without too much CPU.

  15. [...] Morris who’s involved with/runs Geek in the Park. He asked whether the techniques I used in a jQuery marquee plugin I wrote recently could be used to smooth out CPU spikes that were occurring on his site when the [...]

  16. Thanks for this! I’m trying to implement scrolldelay=”” is it supported?

  17. @John – actually … no. Somehow I missed this one. However, in a way, it is available. You need to set scrollamount to a low value – like ’1′. If it’s still too fast, dip in to the jquery.marquee.js file and search for ’25′ – increase that number until you’re happy.

    Note that since it’s a ‘single threaded’ marquee, increasing this number affects all marquees on the page.

  18. Putting links inside the object I want to make a marquee out of is causing strange behavior. In Firefox, it still animates properly but the link is unclickable. I can click the link in IE7 and IE6. I noticed that it creates two anchors for some reason. Any ideas?

  19. @Chris – if you can drop us a link to an example of the code or pop it on http://jsbin.com I’ll take a look at the problem.

  20. Thanks a lot, this is super useful. One last thing that would be nice to add (and I suppose this might make things a bit complex) is “endless” marquees. Just copy the marquee as often as is needed and change the scrolling, then run them all at once.

  21. Apologies, it appears the error was possibly of my own creation. I ended up setting z-index of the div containing the marquee higher than the rest of the page and that fixed the problem. Thanks for the quick response on that, Remy.

  22. [...] 主页 Homepage (No Ratings Yet)  Loading … addthis_url = ‘http://www.codeindex.cn/the-silky-smooth-marquee_931′; addthis_title = ‘The Silky Smooth Marquee’; addthis_pub = ‘grf110′; Popularity: 1 views 相关阅读 (related posts): Slick Tabbed Content Area using CSS & jQuery — November 6, 2008Create A Keypress Navigation Using jQuery — November 6, 2008Floating HTML Menu Using jQuery and CSS — November 6, 2008Cool Animated Navigation with CSS and jQuery — November 6, 2008Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery — November 6, 2008Slideshow2 — November 5, 2008Mac Slider Gallery — November 5, 2008fisheye-苹果机式的导航 — October 30, 2008图片上下滚动导航-AnimateMenu — October 28, 2008Animate a hover with jQuery — October 28, 2008 Tagged with: [ jquery, marquee, 滚动 ] You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  23. Hi Remy – I’m looking for a jQuery-powered marquee that doesn’t have a delay when it reaches the end, ie. the first word (or item) continues directly after the last word, in a continuous loop. I haven’t looked at your code much – have you given this any thought?

  24. im also trying to figure out how to make this have no delay at the end like coda…..

  25. Hi Remy, thanks a lot for making this project! This is the best and easiest to implement marquees I’ve seen so far. The end result is very smooth.

  26. Hi! I have successfully implemented the script, which works perfectly every except Opera (9.27). In Opera the marquee text is moving upwards and doesn’t loop. The same is happening on demo page http://remysharp.com/demo/marquee.html. Any ideas how to fix this?

  27. I had a small problem with vertical scrolling marquee. Basically, only first line of text would be shown. Removing

    white-space: nowrap;

    did the job.

    Thanks for wonderful plugin.

  28. How to change direction with button?

  29. [...] jQuery Marquee Eine jQuery-Alternative zur Verwendung der Variante unter CSS 3. [...]

  30. Hi,

    Very Nice plugin !
    Just a question :
    i tried to change the text of the marquee but couldn’t achieve it.
    $(‘marquee’).text(“foo”) works only if i don’t declare $(‘div.demo marquee’).marquee() (original browser marquee).
    Any idea how to change dynamically the marquee text ?

  31. I had a working marquee in my application, but recently I required some AJAX functionality and turned towards jQuery. After that the marquee started to misbehave in Firefox (all other browsers worked…) and your plugin saved me (as well as allowed me to get rid of marquee, of course). Big thanks! :-)

  32. I’d be interested in binding events that would change the direction and the scrollamount.

    I’ve used this plugin to create a vertical scrolling chatbox and I want the users to be able to scroll it up or down if they want to access any post faster.

    Any idea ??

  33. Remy- Thanks for this great plugin…..But does anyone know how to eliminate the delay/gap that comes at the end like coda and Charlie were talking about?

  34. Is it possible to only get marquee to scroll if the content overflows the width? If the string is longer than the marque width…

  35. Remy I sent you an email a few days ago, you haven’t been active on here since october last year, is this project still active? :)

  36. [...] Aber darum geht es hier garnicht. Ich habe eine rein technische Frage an euch zu folgendem Script: The Silky Smooth Marquee Demoseite: jQuery Marquee Demo Quelltextausschnitt [...]

  37. Great plug!!!

    Please incorpore speed…

    Good job! bye

  38. thanks for this Remy!

    I too would very much like to see a marquee solution that doesnt have the gap between the end of the start.

  39. @Beaver6813 – I did get your email, but I’ve been particularly busy of late. The plugin needs to have a kind of destroy option that will remove the element from it’s listener. I will pick this up again, but there’s a few big projects I’m working on that have to come first.

    You could try the IRC (http://www.mibbit.com/chat/ select Freenode server and #jquery channel) to see if someone could have a crack for you in the mean time?

  40. Great plugin!

    That tip about changing the scroll speed lower than “1″ was great (setting the animateMarquee timeout to a higher value — I use 50 right now). It scrolls so smoothly!

  41. where am I supposed to put the “$(‘marquee’).marquee(optionalClass);”?????

  42. one other thing – is there a way to make the marquee start at the top of the div – instead of starting with a big gap – as the standard marquee does?

    thanks again Remy

  43. Apparently this isn’t quite idiot proof. I need some step by step instructions on how to implement this into my web page. Thanks.

  44. Thanks so much :)

  45. when running marquee with direction up/down I get this ugly gap in endless mode, has somebody a solution to that?

  46. The same as Coda, I was wondering if there is a way to achieve an endless marquee that would begin immediately after the end of the last word. My usage of this is 750p wide so the gap is quite big.

  47. thanks again remy.
    I have 2 scrolling marquees at: http://tinyurl.com/bw633b
    on IE7, they seem to have different widths (even though, before the jQuery kicks in, they look the same width).

    Any ideas?
    Thanks!

  48. hello,

    exactly what i was looking for .. Can any one tell me that i want marquee to be stoped when the page loads and on mouseover i want to start….

    Thanks!

  49. hello i have this great plugin how can i make this automatic refresh ?

    sorry for bad english

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight