This demo uses interval configuration option to make those items scroll automatically within 2 second interval. When placing your mouse over the items scrolling is paused. When all 15 items have been scrolled it starts from the beginning. This is achieved with loop parameter. This kind of system can be used in product catalogues for example.
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
You can also see a little fadeOut/fadeIn effect on the items when they are moved.
JavaScript setup
Here is our JavaScript configuration. We use callback events onBeforeSeek and onSeek to achieve the fading animation.
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable
$("div.scrollable").scrollable({
// items are auto-scrolled in 2 secnod interval
interval: 2000,
// when last item is encountered go back to first item
loop: true,
// make animation a little slower than the default
speed: 600,
// when seek starts make items little transparent
onBeforeSeek: function() {
this.getItems().fadeTo(300, 0.2);
},
// when seek ends resume items to full transparency
onSeek: function() {
this.getItems().fadeTo(300, 1);
}
});
});
</script>
Show this demo as a standalone page
