jQuery Plugin For Animated Vertical Ticker - totem
File Size: | 37.1 KB |
---|---|
Views Total: | 13191 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
totem is a simple jQuery plugin that make it easy to create an animated vertical ticker widget with auto scrolling effect. Roll over the ticker will stop scrolling.
How to use it:
1. Include jQuery library and jQuery totem on your html page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.totemticker.js"></script>
2. Markup Html structure
<ul id="vertical-ticker"> <li>Item 1</li> <li>Item 1</li> <li>Item 3</li> ... </ul>
3. The CSS
#vertical-ticker { height: 400px; overflow: hidden; margin: 0; padding: 0; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); list-style: none; } #vertical-ticker li { padding: 35px 20px; display: block; background: #efefef; color: #333; border-bottom: 1px solid #ddd; text-align: center; font-size: 25px; font-weight: bold; font-family: Helvetica Neue, times, serif; }
4. Call the plugin with options
<script type="text/javascript"> $(function(){ $('#vertical-ticker').totemticker({ row_height:'100px', // Height of each ticker row in PX next:'#ticker-next', // ID of next button or link previous:'#ticker-previous', // ID of previous button or link stop:'#stop', // ID of stop button or link start:'#start', // ID of start button or link mousestop:true, // Stop while mouse is hovers over it speed: 800, // Speed of transition animation (ms) interval: 4000, // Time between change (ms) max_items: 5 // Maximum items to display }); }); </script>
This awesome jQuery plugin is developed by buildinternet. For more Advanced Usages, please check the demo page or visit the official website.