Vertical HTML Content Scroller with jQuery - Super Treadmill

Super Treadmill is a jQuery plugin for creating a vertical scroller which scrolls the html content up and down like a carousel or traditional marquee element.

How to use it:

1. Load jQuery library and the jQuery super treadmill plugin at the bottom of the document so the page loads faster.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="super-treadmill.js"></script>

2. Create a group of html content you want to scroll through.

<div id="demo" class="treadmill">
  <div class="treadmill-unit">
    <h2>Breaking News 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet tristique diam, nec pretium libero. </p>
  </div>
  <div class="treadmill-unit">
    <h2>Breaking News 2</h2>
    <p>Morbi elementum lorem eros, quis egestas est placerat ac.  </p>
  </div>
  <div class="treadmill-unit">
    <h2>Breaking News 3</h2>
    <p>Fusce accumsan magna quis arcu dictum, eget ornare tortor ultricies. </p>
  </div>
</div>

3. Style the content scroller in your own CSS.

.treadmill {
  overflow: hidden;
  border: 1px solid #46CFB0;
  background-color: #34BC9D;
  padding: 0 20px;
}

.treadmill-unit {
  overflow: hidden;
  position: relative;
}

4. You can also add a 'stop' button to pause the auto scrolling.

<button id="stop">Stop</button>

5. Active the content scroller with default settings.

$('#demo').startTreadmill();

6. Options and defaults.

// active the scroller on page load
runAfterPageLoad: true,

// up or down
direction: "down",

// "slow", "medium" or "fast" or a custom value
speed: "medium",

// number of itemss viewable at a time
viewable: 3,

// pause on hover
pause: false

---

This awesome jQuery plugin is developed by nishadmenezes. For more Advanced Usages, please check the demo page or visit the official website.