HTML List Based Scroller / Ticker Plugin With jQuery - simpleTicker
File Size: | 4.2 KB |
---|---|
Views Total: | 16066 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight, fast, cross-browser jQuery plugin which lets you generate an auto scrolling/fading/sliding scroller from an html unordered list. Great for news / stock ticker or text scroller.
How to use it:
1. Add jQuery library and the jQuery simpleTicker plugin's JS & CSS files into the html page.
<link href="jquery.simpleTicker.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="jquery.simpleTicker.js"></script>
2. Wrap you html list into a DIV container with the CSS class of 'ticker' as follow:
<div id="demo" class="ticker"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div>
3. Enable the ticker plugin with default options.
$.simpleTicker($("#demo"));
4. Set the animation you want to use. Available animation types:
- roll
- slide
- fade
$.simpleTicker($("#demo"),{ 'effectType':'roll' });
5. Config the animation.
$.simpleTicker($("#demo"),{ speed : 1000, delay : 3000, easing : 'swing', effectType : 'slide' });
Changelog:
2019-05-01
- Fix format.
This awesome jQuery plugin is developed by miraoto. For more Advanced Usages, please check the demo page or visit the official website.