This time I will share jQuery Plugin and tutorial about Infinite Text List Scroller – jQuery Vertical Loop, hope it will help you in programming stack.
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.
03 |
<li><p><a href="#">Lorem ipsum dolor sit amet</a></p></li> |
04 |
<li><p><a href="#">Consectetur adipiscing elit</a></p></li> |
05 |
<li><p><a href="#">Aenean pharetra vel ipsum eget.</a></p></li> |
06 |
<li><p><a href="#">Sed mollis neque et tellus interdum blandit. </a></p></li> |
07 |
<li><p><a href="#">Mauris sed fermentum nisl. </a></p></li> |
08 |
<li><p><a href="#">Aenean at nisl nec sapien pretium vulputate.</a></p></li> |
2. Load the jquery-vertical-loop.js script after jQuery library.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<script src="jquery-vertical-loop.js"></script> |
3. Call the function on the top container.
1 |
$('.example').verticalLoop(); |
4. Set the duration of the animation. Default: 5000ms.
1 |
$('.example').verticalLoop({ |
5. Set the diration of the scroller. Default: ‘asc’ (bottom to top).
1 |
$('.example').verticalLoop({ |
6. Execute a callback after init.
1 |
$('.example').verticalLoop({ |
2 |
oninitend: function (c) { |
This awesome jQuery plugin is developed by bosscheng. For more Advanced Usages, please check the demo page or visit the official website.
