Hay there,

One of the web development projects I'm working has given me the chance to build an "endless" image scroller in jQuery and share it with you. The challenge was to figure out how to make the images scroll in a continuous flow and the solution I came up with was to split the images in two containers and when one container went out of view reset it's position and restart the animation.

I hope this will help all you web designers out there in Ohio or any other place, who will want to develop such a animation effect.

This is an outdated version, the new one is here

I will start by presenting the CSS rules. First we have a mask that will hide all the movement by sitting on top of the two animated containers. As you can see I've already established a positioning for the two containers and that is one at 0 pixels and the other at 1165 pixels and this is because all my images in one container summed to 1165 but you will have to adapt this widths and positions to your needs. Don't forget that you will have to float left all the images inside the container.

#rotatingimages_mask {
width: 1155px;
overflow: hidden;
height: 56px;
margin: auto;
display: block;
position: relative;
}
#rotatingimages1, #rotatingimages2 {
width: 1155px;
position:absolute;
}
#rotatingimages1 {
left:0px;
}
#rotatingimages2 {
left:1165px;
}

Now regarding the jQuery script what it actually does is scroll both containers to the right by 1155 pixels ... when this action is complete and the second container has reached +1155 pixels (from 0), I reset it's position to -1155 pixels and the whole animation restarts giving the impression of an endless scroll.

jQuery(document).ready(function() {
var again_again = 1;
	function again() {
	  again_again = 1 - again_again;
	  if(again_again == 0) {
		return;
	  }
	  verify();
	}


	function verify() {
		if (parseInt(jQuery('#rotatingimages1').css("left")) >= 0 && parseInt(jQuery('#rotatingimages1').css("left")) < 1155) {
			// I'm just making sure the two containers are in the right position
			jQuery('#rotatingimages2').css({left: -1155});
			jQuery('#rotatingimages1').css({left: 0});
			//do the animation and on complete load the again function
			jQuery('#rotatingimages1, #rotatingimages2').animate({left: "+=1155px"}, 15000, 'linear', function() { again() });
		}
		else if (parseInt(jQuery('#rotatingimages1').css("left")) >= 1155) {
			//doing the same thing for the second set of animations... making sure they're where they should be
			jQuery('#rotatingimages2').css({left: 0});
			jQuery('#rotatingimages1').css({left: -1155});
			jQuery('#rotatingimages1, #rotatingimages2').animate({left: "+=1155px"}, 15000, 'linear', function() { again() });
		}
	};
	verify(); //loading the animation function
});

You can view a live example in the header area of this website we are developing: Trip Joiner. Feel free to ask me any questions regarding it and I will be more then happy to help. Thanks again for reading this and don't forget to like our Facebook page and participate in our prize contest.