jQuery Plugin To Scroll Text Like The Marquee Element - simpleMarquee

A simple jQuery plugin which makes you text scroll left, right, up or down automatically, similar to the traditional Html marquee element.

Features:

• Vertical and horizontal scroll
• Auto play
• Multiple instances on one page
• Pause on hover over
• Cross browser.

See also:

• Create A LED/LCD Style Text Scroller Using jQuery and CSS
• Simple News Ticker/Scroller Plugin with jQuery - Smart Marquee
• Text Scrolling Plugin for jQuery - Marquee

How to use it:

1. Import jQuery library and the jQuery simpleMarquee plugin into your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="lib/jquery.simplemarquee.js"></script>

2. Wrap your scrollable text into a container.

<div class="demo"> Your Text Goes Here </div>

3. Call the plugin on the container element and done. By default, the text will be scrolled from right to left.

$('.demo').simplemarquee();

4. Available options to customize the text scroll behaviors.

$('.demo').simplemarquee({

// scroll speed in px per second
speed: 30,

// scroll directions
// left, right, top and bottom
direction: 'left',

// number of cycles before pausing
cycles: 1,

// space in px between the duplicated contents
space: 40,

// delay between each cycle in ms
delayBetweenCycles: 2000,

// pause/restart on hover
handleHover: true,

// update marquee on resize
handleResize: true,

// easing
easing: 'linear'

});

5. Public Methods

// Updates the marquee
// .simplemarquee('update', [restart])
// If restart is true, the cycles will be restarted.
$('.demo').simplemarquee('update');

// Pauses the marquee
$('.demo').simplemarquee('pause');

// Resumes the marquee
$('.demo').simplemarquee('resume');

// Toggle between the pause/resume methods.
$('.demo').simplemarquee('toggle');

// Destroy marquee
$('.demo').simplemarquee('destroy');

6. Events

$('.demo').on({

// Fired after finishing each cycle
'cycle': null,

// Fired when paused
'pause': null,

// Fired when resumed
'resume': null,

// Fired when all cycles are done
'finish': null
});

Change logs:

2016-09-14

• Add an easing setting

2016-08-20

• Fix for Internet Explorer's float outerWidth/outerHeight values

2015-03-19

• Small improvement.

2015-03-18

• Bugfix and upgrade to v0.2.2

2014-12-22

• Add restart parameter to update.

---

This awesome jQuery plugin is developed by IndigoUnited. For more Advanced Usages, please check the demo page or visit the official website.