Infinite Text List Scroller - jQuery Vertical Loop
File Size: | 4.83 KB |
---|---|
Views Total: | 4178 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Vertical Loop is a jQuery vertical scroller plugin for infinitely and smoothly scrolling a list of text (links) in the vertical direction.
Perfect for news ticker, stock scroller, feed flow, etc.
How to use it:
1. Create a regular HTML list of the scroller.
<div class="example"> <ul> <li><p><a href="#">Lorem ipsum dolor sit amet</a></p></li> <li><p><a href="#">Consectetur adipiscing elit</a></p></li> <li><p><a href="#">Aenean pharetra vel ipsum eget.</a></p></li> <li><p><a href="#">Sed mollis neque et tellus interdum blandit. </a></p></li> <li><p><a href="#">Mauris sed fermentum nisl. </a></p></li> <li><p><a href="#">Aenean at nisl nec sapien pretium vulputate.</a></p></li> </ul> </div>
2. Load the jquery-vertical-loop.js
script after jQuery library.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="jquery-vertical-loop.js"></script>
3. Call the function on the top container.
$('.example').verticalLoop();
4. Set the duration of the animation. Default: 5000ms.
$('.example').verticalLoop({ delay: 2000 });
5. Set the diration of the scroller. Default: 'asc' (bottom to top).
$('.example').verticalLoop({ order: 'desc' // top to bottom });
6. Execute a callback after init.
$('.example').verticalLoop({ oninitend: function (c) { // do something } });
This awesome jQuery plugin is developed by bosscheng. For more Advanced Usages, please check the demo page or visit the official website.