Text Scrolling Plugin for jQuery - Marquee

Marquee.js is 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.

How to use it:

1. Include jQuery library and the Marquee.js plugin in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="jquery.marquee.js"></script>

2. Include jQuery pause plugin for the pause on hover functionality if you'd like to scroll through the text using jQuery animate method instead of CSS3. OPTIONAL.

<script src="jquery.pause.js"></script>

3. Include the jQuery easing plugin for additional easing function. OPTIONAL.

<script src="jquery.easing.min.js"></script>

4. Wrap your text into a container element.

<div class='marquee'>Less text here</div>

5. Initialize the plugin to scroll the text inside its container.

$(function(){
  $('.marquee').marquee();    
});

6. Possible options to config the plugin.

$('.marquee').marquee({

  // Set to false if you want to use jQuery animate method
  allowCss3Support: true,

  // CSS3 easing function
  css3easing: 'linear',

  // Requires jQuery easing plugin.
  easing: 'linear',

  // Time to wait before starting the animation
  delayBeforeStart: 1000,

  // 'left', 'right', 'up' or 'down'
  direction: 'left',

  // Should the marquee be duplicated to show an effect of continues flow
  duplicated: false,

  // Duration of the animation
  duration: 5000,

  // Space in pixels between the tickers
  gap: 20,

  // On cycle pause the marquee
  pauseOnCycle: false,

  // Pause on hover
  pauseOnHover: false,

  // The marquee is visible initially positioned next to the border towards it will be moving
  startVisible: false
  
});

7. You're also allowed to pass the options via HTML data attributes:

<div class="marquee"
     data-optionName="value">
     Less text here
</div>

8. API methods:

var myMarquee = $('.marquee').marquee();

// pause
myMarquee.marquee('pause');

// resume
myMarquee.marquee('resume');

// toggle
myMarquee.marquee('toggle');

// destroy
myMarquee.marquee('destroy');

9. Event handlers:

$('.marquee')
.on('beforeStarting', function () {
  // do something
})
.on('finished', function () {
  // do something
})
.on('paused', function () {
  // do something
})
.on('resumed', function () {
  // do something
})
.marquee();

Changelog:

2021-02-26

• v1.6.0

2021-02-24

• Minify script and module

2018-09-01

• Strict equality operators and some formatting.

2018-08-30

• Supports jQuery 3.0+

2017-11-15

• Update jquery.marquee.js

2017-09-27

• updated minified version

2016-08-30

• Fix resume method does not work when use the jQuery Ver 3

2015-03-12

• Fixed Plugin stops working when style tag in head is overritten

2015-03-08

• Added startVisible option.

2015-02-04

• fixed a bug where data-gap was not working

2014-07-16

• added px to containerHeight

2014-04-11

• Bug fixed

2014-04-03

• Bug fixed

2014-03-12

• Bug fixed with CSS3 animation first round of marquee

2014-02-21

• Fixed a bug with duplicated option

v1.3.0 (2014-02-03)

• Fixed a bug.

v1.2.0 (2014-01-28)

• bugs fixed.

v1.1.0 (2014-01-24)

• Finished event for CSS3 fixed - adding to minified version
• Event example added

v1.0.0 (2013-12-20)

• Animation finished event added using CSS3 with JS :)
• Demo updated with new options and CSS3 support examples.

v0.2.4 (2013-11-28)

• added easing options, requires jQuery easing plugin.

v0.2.3 (2013-11-25)

• added 2 options to support 'up' and 'down' directions.

v0.2.2 (2013-2-22)

• Add pauseOnHover option. Please note that you will need to include jQuery pause plugin before the jQuery Marquee plugin.

---

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