jQuery Marquee

출처 http://www.jqueryscript.net/demo/Text-Scrolling-Plugin-for-jQuery-Marquee/

 

jQuery Marquee
download

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/trigger 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/trigger 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.

Options

• speed: Speed in milliseconds in which you want your text to travel with width of your main container. 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: on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause. Default is false

Demos

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

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit END.

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