Infinite-Scrolling Marquee Plugin - jQuery Horizontal-Panel
File Size: | 355 KB |
---|---|
Views Total: | 4653 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Horizontal-Panel is a jQuery based marquee-like content scroller that infinitely scrolls through a list of HTML content (e.g. breaking news, featured posts, etc) in the horizontal direction.
How to use it:
1. Insert a list of content into the marquee container as follows:
<div id="panel" class="container"> <div class="marquee"> <ul class="content"> <li><h1>Breaking News 1</h1><img src="img/flash-white.png"/></li> <li><h1>Breaking News 2</h1><img src="img/flash-white.png"/></li> <li><h1>Breaking News 3</h1><img src="img/flash-white.png"/></li> <li><h1>Breaking News 4</h1><img src="img/flash-white.png"/></li> <li><h1>Breaking News 5</h1><img src="img/flash-white.png"/></li> </ul> </div> </div>
2. Download and load the main script horizontal-panel.js
after jQuery.
$(function(){ $('#panel').hpanel(); });
3. Attach the plugin to the top container on document ready.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/horizontal-panel.js"></script>
4. The example CSS to style the scroller.
#panel{ bottom: 25px; position: absolute; } .marquee, *[class^="marquee"] { white-space: nowrap; } .content { margin: 0; } .content li { color: #fff; height: 35px; position: absolute; list-style-type: none; } .content h1{ color: white; font-family: 'Reckoner'; letter-spacing: 9px; font-size: 2em; margin: 0 0 0 0; display: inline; vertical-align: bottom; } .content img{ width: 30px; padding: 3px 40px 0 35px; }
5. Set the animation speed. Default: 10s.
$('#panel').hpanel({ duration: 100000 });
6. Set the padding in pixels. Default: 0.
$('#panel').hpanel({ padding: 10 });
7. Enable/disable pause on hover/focus. Default: true.
$('#panel').hpanel({ hover: false focus: true });
8. Enable/disable infinite looping. Default: false.
$('#panel').hpanel({ stop: true });
9. Default CSS classes.
$('#panel').hpanel({ marquee_class: '.marquee', content_class: '.content', fixed_class: 0 });
10. API methods.
// pause $('#panel').pause(); // resume $('#panel').resume(); // switch off $('#panel').switchOff();
This awesome jQuery plugin is developed by borjanavarro. For more Advanced Usages, please check the demo page or visit the official website.