Download This Plugin Back To jQueryScript
An alternative to marquee tag, which is an old and non-standard HTML element, that causes text/image/element to scroll up, down, left or right automatically.
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 1000direction
Direction towards which the marquee will animate 'left' / 'right' / 'up' / 'down'
. Default is 'left'
. Todo: need to change this to ltr/rtl etcduplicated:
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.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.
allowCss3Support=false
as data attribute. Inspect the element and you will see margin-left
option being changed using jQuery.
<div data-speed="2000" data-direction="right" class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
$('.marquee-with-options').marquee({ speed: 5000, gap: 50, delayBeforeStart: 0, direction: 'left', duplicated: true, pauseOnHover: true });Pause the above animation | Resume the paused animation | Pause on hover this link
$('.marquee-vert').marquee({ direction: 'up', speed: 1500 });