Work
SubscribeThe 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:
- Progressively enhances the
marqueetag making this plugin uber easy to use. - 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);
});
[...] someone pointed out: the <marquee> is back. or <blink>. Well not exactly, but the w3c thinks tha this might [...]
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!
[...] Sharp gives us a blast form the past for the some Friday [...]
You are indeed one sharp guy. Thanks for sharing.
Any chance for RSS support ala jTicker?
I'd be interested in seeing some support for vertical scrolling!
Also any chance to have a fadein / fadeout effect???
Your work saved me a huge headache. Much appreciated & Great job
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
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
Excellent work! Up/Down; oh, yes please.
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.
[...] 4. The Silky Smooth Marquee [...]
Remy, excellent work. Helped us greatly as we tried to find a neat way to get a horizontal marquee without too much CPU.
[...] 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 [...]
Thanks for this! I'm trying to implement scrolldelay="" is it supported?
@John - actually ... no. Somehow I missed this one. However, in a way, it is available. You need to set
scrollamountto 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.
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?
@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.
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.
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.
[...] 主页 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. [...]
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?
im also trying to figure out how to make this have no delay at the end like coda.....
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.
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?
[...] http://remysharp.com/2008/09/10/the-silky-smooth-marquee/ [...]
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.