A jQuery content scroller!
Endless river is a jQuery plugin, that animates content and make it scroll endlessly!
The usefull feature is that you don't have to set widths to elements, because speed is set in pixel/second!!
EndlessRiver will calculate the best width for the <li> element and keep speed constant!
The only requirement needed is jQuery that you can install it via Bower.
Simply include the endlessRiver JS and CSS
<html>
<head>
<script type="text/javascript" src="path-to/js/endlessRiver.js"></script>
<link type="text/css" rel="stylesheet" href="path-to/css/endlessRiver.css" />
</head>
</html>Create an <ul> list like this
<ul id="myUl">
<li> | </li>
<li style="color: red">Espresso</li>
<li style="color: orange">Cappuccino</li>
<li style="color: yellow">American</li>
<li style="color: green">Tea</li>
<li style="color: black">Milk</li>
<li style="color: blue">Juice</li>
<li> | </li>
</ul>and call it like this!
$(document).ready(function(){
$("#myUl").endlessRiver();
});Params
| option | description | type | default |
|---|---|---|---|
| speed | Speed of animations in pixel/second | Number | 100 |
| pause | Pause on hover: if true, scrolling will stop on mouseover | Boolean | true |
| buttons | If true, shows play/stop buttons | Boolean | false |
| startOffScreen | If true, starts the ticker outside of the ticker container | Boolean | false |
Check out LICENSE file (MIT)