
The Conveyor Ticker jQuery plugin takes a list of strings and converts them into a horizontal infinite-looping scroller with support for pause on hover. Similar to the traditional marquee element. Suitable for news ticker, stock ticker, etc.
1. Create a normal HTML unordered list for the ticker/scroller.
<div class="js-conveyor-example"> <ul> <li> <span>Horizontal Ticker Animation In jQuery</span> </li> <li> <a href="#"> <span>I am a <b>hyperlink</b></span> </a> </li> <li> <span>Conveyor Ticker</span> </li> <li> <span>A Simple jQuery plugin</span> </li> </ul> </div>
2. Import the jQuery Conveyor Ticker plugin's files along with the latest version of jQuery library into the document.
<link href="dist/css/jquery.jConveyorTicker.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="dist/js/jquery.jConveyorTicker.min.js"></script>
3. Call the function on the top container to activate the ticker/scroller.
$(function() { $('.js-conveyor-example').jConveyorTicker(); });
4. Customize the animation speed in milliseconds. Default: 200.
$(function() { $('.js-conveyor-example').jConveyorTicker({ anim_duration: 500 }); });
5. Reverse the direction of the ticker animation. Default: left to right.
$(function() { $('.js-conveyor-example').jConveyorTicker({ reverse_elm: true }); });
This awesome jQuery plugin is developed by lluz. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 08.12.2018
- Source