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
   
Infinite Text List Scroller - jQuery Vertical Loop

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.