Vertical HTML Content Scroller with jQuery - Super Treadmill
File Size: | 6.8 KB |
---|---|
Views Total: | 5546 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.