Text Scrolling Plugin for jQuery - Marquee

Text Scrolling Plugin for jQuery - Marquee
File Size: 12.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 Marquee.js in your header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.marquee.js"></script>

2. Include jQuery pause plugin for pause on hover.

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

3. Include jQuery easing plugin for easing options.

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

4. Markup

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

5. Call the plugin

<script>
	$(function(){
		$('.marquee').marquee();		
	});
</script>

6. Options

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

  //If you wish to always animate using jQuery
  allowCss3Support: true,

  //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
  css3easing: 'linear',

  //requires jQuery easing plugin. Default is 'linear'
  easing: 'linear',

  //pause time before the next animation turn in milliseconds
  delayBeforeStart: 1000,
  //'left', 'right', 'up' or 'down'
  direction: 'left',

  //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: false,

  //speed in milliseconds of the marquee in milliseconds
  duration: 5000,

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

  //on cycle pause the marquee
  pauseOnCycle: false,

  //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
  pauseOnHover: false,

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

Change Logs:

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.