Infinite Text List Scroller - jQuery Vertical Loop
| File Size: | 4.83 KB |
|---|---|
| Views Total: | 4423 |
| 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.








