A 1.3kb jQuery plugin to scroll the text like the old traditional marquee
- pauseOnHover option added. Please note that you will need to include jQuery pause plugin: https://github.com/tobia/Pause before the jQuery Marquee plugin.
- The plugin is improved to adjust the speed according to the lenth of the text automatically. For more details read: aamirafridi#1
- 'duplicated' option added. See the details below in Options section.
- speed: Speed in milliseconds of the marquee. Please make note that same speed value will react differently for text with different lengths. Default is 10000.
- gap: Gap in pixels between the tickers. Default is 20.
- delayBeforeStart: Time in milliseconds before the marquee starts animating. Default is 1000
- direction: Direction towards which the marquee will animate 'left' or 'right'. Default is 'left'.
- duplicated: true or false - should the marquee be duplicated to show an effect of continues flow. Default is false.
- pauseOnHover: true or false - pause the animation on mouse hover. Please note that you will need to include jQuery pause plugin: https://github.com/tobia/Pause before the jQuery Marquee plugin.
- beforeStarting: Event will be fired on the element before animation starts.
- finished: Event will be fired on the element after the animation finishes.
- pause: Fire this event on the element when you want to pause the animation, for example when you click/hover a link.
- paused: Event will be fired on the element when the animation is paused.
- resume: Fire this event on the element when you want to resume, the paused animation.
- resumed: Event will be fired on the element when the animation is resumed.
- Demo: http://jquery.aamirafridi.com/jquerymarquee/
- Blog post: http://aamirafridi.com/jquery/jquery-marquee-plugin
###HTML:
<div class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
###CSS:
.marquee {
width: 300px; /* the plugin works for responsive layouts so width is not necessary */
overflow: hidden;
border:1px solid #ccc;
}
###Apply plugin:
/**
* Example of starting a plugin with options.
* I am just passing all the default options
* so you can just start the plugin using $('.marquee').marquee();
*/
$('.marquee').marquee({
//speed in milliseconds of the marquee
speed: 15000,
//gap in pixels between the tickers
gap: 50,
//time in milliseconds before the marquee will start animating
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true
});
###How to use events:
var $mq = $('.marquee').marquee();
$('.someLink').click(function(){
$mq.trigger('pause')
});
var $mq = $('.marquee').marquee();
$('.someLink').click(function(){
$mq.trigger('resume');
});