Infinite Looping Scroller Plugin With jQuery - loopmovement
File Size: | 4.97 KB |
---|---|
Views Total: | 3792 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

loopmovement is a really simple jQuery scroller plugin that scrolls vertically or horizontally through a series of html content in a fixed height container. Similar to the carousel or traditional marquee element.
Basic usage:
1. The Html structure for the scroller.
<div id="box"> <div id="inner"> <div class="content">Item 1</div> <div class="content">Item 2</div> <div class="content">Item 3</div> ... </div> </div>
2. The basic CSS styles for the scroller.
#box { position: relative; height: 300px; width: 500px; overflow: hidden; } #inner { position: absolute; } .top { top: 0px; } .bottom { bottom: 0px; } .left { left: 0px; } .right { right: 0px; } .content { width: 460px; height: 300px; background: #34BC9D; font-size: 50px; color: #fff; line-height: 300px; padding: 0 20px; }
3. Include the needed jQuery library and the jQuery loopmovement plugin's script at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="jquery.loopmovement.min.js"></script>
4. Enable the plugin.
$('#inner').loopmovement({ // top, right, bottom, left 'direction':'top', // animation speed 'speed':20 });
This awesome jQuery plugin is developed by fireqong. For more Advanced Usages, please check the demo page or visit the official website.