jQuery Plugin For Animated Vertical Ticker - totem

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.