Back to index

Clickable logo parade

Smooth Div Scroll can be used to create a "parade" of clickable logos or banners. Either you make them scrollable manually or, like in this example, make them loop endlessly. I've added event handlers to pause the autoscroll whenever the user moves the mouse over the logos. And when the user moves the mouse pointer away from the logos, the autoscrolling starts again.

Here's the CSS in this example:

#logoParade
{
	width: 728px;
	height: 75px;
	position: relative;
}

#logoParade div.scrollableArea *
{
	float: left;
	padding-left: 10px;
}

...and this is what the jQuery code looks like. Note the code for the event handlers that stop/start the autoscrolling:

$(document).ready(function() {
	$("#logoParade").smoothDivScroll({ 
		autoScrollingMode: "always", 
		autoScrollingDirection: "endlessloopright", 
		autoScrollingStep: 1, 
		autoScrollingInterval: 25 
	});

	// Logo parade event handlers
	$("#logoParade").bind("mouseover", function() {
		$(this).smoothDivScroll("stopAutoScrolling");
	}).bind("mouseout", function() {
		$(this).smoothDivScroll("startAutoScrolling");
	});

});

Back to index