Content Auto-scroll
Testimonial type scroller.
HTML
<div id="wrap">
<div id="content">
<ul id="scroller">
<li>
<span>Titolo Lorem Ipsum 1</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio
eros pellentesque sapien, at consectetur mi nibh at massa.
</li>
<li>
<span>Titolo Lorem Ipsum 2</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio eros pellentesque sapien, at consectetur mi nibh at massa.
</li>
<li>
<span>Titolo Lorem Ipsum 3</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio eros pellentesque sapien, at consectetur mi nibh at massa.
</li>
<li>
<span>Titolo Lorem Ipsum 4</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio eros pellentesque sapien, at consectetur mi nibh at massa.
</li>
<li>
<span>Titolo Lorem Ipsum 5</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio eros pellentesque sapien, at consectetur mi nibh at massa.
</li>
</ul>
</div>
</div>
CSS
div#content {
padding-top: 0;
margin-bottom: 20px;
}
ul#scroller {
height: 90px;
overflow: hidden;
}
ul#scroller li {
height: 70px;
padding: 10px;
}
ul#scroller li a { color: #666; }
ul#scroller li span {
display: block;
color: #d46a15;
font-size: 20px;
}
JavaScript
$(function() {
var scroller = function() {
setTimeout(function() {
$('#scroller li:first').animate( {marginTop: '-90px'},
2000, //Adjust the speed of the scroll (1000 = 1 Second)
function() {
$(this).detach().appendTo('ul#scroller').removeAttr('style');
});
scroller();
}, 5000); //Adjust the time before scroll (1000 = 1 Second)
};
scroller();
});