jQuery Marquee with CSS3 Animations Support

Events

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.
resume: Fire this event on the element when you want to resume, the paused animation.

Options

allowCss3Support If you wish the plugin should animate always using jQuery animate method even if browser supporst CSS3 animations. Default is true
css3easing Works when allowCss3Support is set to true - for full list click here. Default is 'linear'
easing Requires jQuery easing plugin. Default is 'linear'.
delayBeforeStart Time in milliseconds before the marquee starts animating. Default is 1000
direction Direction towards which the marquee will animate 'left' / 'right' / 'up' / 'down'. Default is 'left'. Todo: need to change this to ltr/rtl etc
duplicated: Should the marquee be duplicated to show an effect of continues flow. Use this only with the text is shorter than the container. Default is false
duration Speed in milliseconds in which you want your text to travel with width of your main container. Default is 5000. This option is the old speed option which still works but duration is the more word.
gap Gap in pixels between the tickers. Will work only when the duplicated option is set to true. Default is 20 Note: 20 means 20px so need to use '20px' as the value.
pauseOnHover: on hover pause the marquee. If browser supports CSS3 and allowCss3Support is set to true than it will be done using CSS3. Otherwise this will be done using jQuery plugin https://github.com/tobia/Pause. Default is false
pauseOnCycle on cycle pause the marquee for delayBeforeStart milliseconds.

Demos

NEW!!! Now with CSS3 Support

Now the plugin with detect if browser supports CSS3 animations than it will animate the element using CSS3 which will perform much better than animating using jQuery.

The pauseOnHover also works using CSS3. The plugin just prepares the setup and required CSS3 animation CSS.

Due to some reasons if you want plugin to animate always using jQuery than you need to set allowCss3Support option to false. Also an extra option css3easing is added.

Example of same element being animated using CSS3 and jQuery

Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.

<= CSS3 animated (if your browser supports CSS3 animation. You can check this element in inspector.)

Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.

<= Animated using jQuery by having allowCss3Support=false as data attribute. Inspect the element and you will see margin-left option being changed using jQuery.

Default options

NOTE: Following 3 marquee has different length of text but the speed is same. Plugin will adjust the speed according to the length of your text. (new feature)

Less text here

Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.

Very very long text lorem ipsum dolor sit amet, lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur adipiscing elit END.

Options as data attributes

<div data-speed="2000" data-direction="right" class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit END.

Overwrite the default options with following

$('.marquee-with-options').marquee({
	speed: 5000,
	gap: 50,
	delayBeforeStart: 0,
	direction: 'left',
	duplicated: true,
	pauseOnHover: true
});

Lorem ipsum dolor sit amet, consectetur adipiscing elit END.

Pause the above animation | Resume the paused animation | Pause on hover this link

Direction vertical with default options

$('.marquee-vert').marquee({
	direction: 'up',
	speed: 1500
});

Before (no height provided to the element)

Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.

After

Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.

With direction 'down' (using data attributes)

Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.

Direction vertical with duplicated option true (using data attributes) and height of 50px assigned using CSS

Inspect the following marquee to see data attributes and style attribute

Starts here Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis, laudantium ratione. Wisi! Quidem tortor, quisquam earum! Pretium necessitatibus.

With pauseOnHover and pauseOnCycle options

Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.