In this example I have three autoscrollers that loop endlessly. Each have a different speed but you can pause any one of them by moving the mouse over them. The content is loaded using the parameter ajaxContentURL - I just thought it would be nice to demonstrate that feature.
I've noticed that the smoothness of the scrolling depends on which browser you use. I get the smoothest experience when I use Google Chrome and it looks good in Firefox too. In Internet Explorer 7 the scrolling seems to flicker. In other words, the performance of Smooth Div Scroll seems to depend on the performance of the javascript performance of the browser, where Chrome is known to excel and Internet Explorer is the black sheep of the family.
#logoParade, #logoParadeTwo, #logoParadeThree
{
width: 500px;
height: 75px;
position: relative;
}
div.scrollableArea a
{
float: left;
}
div.scrollableArea a > img
{
margin-right: 25px;
}
...and here's what the jQuery code looks like:
$(function() {
$("div#logoParade").smoothDivScroll({autoScroll: "always", autoScrollDirection: "endlessloop", pauseAutoScroll: "mouseover", autoScrollSpeed: 1, ajaxContentURL: "ajaxContent.xml"});
$("div#logoParadeTwo").smoothDivScroll({autoScroll: "always", autoScrollDirection: "endlessloop", pauseAutoScroll: "mouseover", autoScrollSpeed: 3, ajaxContentURL: "ajaxContent.xml"});
$("div#logoParadeThree").smoothDivScroll({autoScroll: "always", autoScrollDirection: "endlessloop", pauseAutoScroll: "mouseover", autoScrollSpeed: 5, ajaxContentURL: "ajaxContent.xml"});
});
Back to the main page