Text Scrolling Plugin for jQuery - Marquee

File Size: 19.7 KB
Views Total: 163874
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.