How To: Create a jQuery Text/Image Scroller [Tutorial]

In this tutorial im going to show you how to create a horizontal image slider and a text scroller using jQuery, html + CSS. With jQuery Scroller you can create easily smart scrolling text, news ticker,or image animations with few lines of code in jQuery.

There is a total of 5 different scrollers which can be found by downloading the files at the bottom of this post. In this post i will only include 2 sliders, but more can be found on the demo and the source files at the bottom.

jQuery Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.vegabit.com/jquery_scroller/jquery.Scroller-1.0.min.js" type="text/javascript"></script> 
<script type="text/javascript">
<!--
$(document).ready(function() {

	//create scroller for each element with "horizontal_scroller" class...
	$('.horizontal_scroller').SetScroller({	velocity: 	 60,
											direction: 	 'horizontal',
											startfrom: 	 'right',
											loop:		 'infinite',
											movetype: 	 'linear',
											onmouseover: 'pause',
											onmouseout:  'play',
											onstartup: 	 'play',
											cursor: 	 'pointer'
										});
	/*
		All possible values for options...
		
		velocity: 		from 1 to 99 								[default is 50]						
		direction: 		'horizontal' or 'vertical' 					[default is 'horizontal']
		startfrom: 		'left' or 'right' for horizontal direction 	[default is 'right']
						'top' or 'bottom' for vertical direction	[default is 'bottom']
		loop:			from 1 to n+, or set 'infinite'				[default is 'infinite']
		movetype:		'linear' or 'pingpong'						[default is 'linear']
		onmouseover:	'play' or 'pause'							[default is 'pause']
		onmouseout:		'play' or 'pause'							[default is 'play']
		onstartup: 		'play' or 'pause'							[default is 'play']
		cursor: 		'pointer' or any other CSS style			[default is 'pointer']
	*/

	//how to overwrite options after setup and without deleting the other settings...
	$('#no_mouse_events').ResetScroller({	onmouseover: 'play', onmouseout: 'play'   });
	$('#scrollercontrol').ResetScroller({	velocity: 85, startfrom: 'left'   });

	//if you need to remove the scrolling animation, uncomment the following line...
	//$('#scrollercontrol').RemoveScroller();

	//how to play or stop scrolling animation outside the scroller... 
	$('#play_scrollercontrol').mouseover(function(){   $('#scrollercontrol').PlayScroller();   });
	$('#stop_scrollercontrol').mouseover(function(){   $('#scrollercontrol').PauseScroller();  });		

	//create a vertical scroller...	
	$('.vertical_scroller').SetScroller({	velocity: 80, direction: 'vertical'  });		
	
	//"$('#soccer_ball_container')" inherits scrolling options from "$('.horizontal_scroller')",
	// then I reset new options; besides, "$('#soccer_ball_container')" will wraps and scrolls the bouncing animation...
	$('#soccer_ball_container').ResetScroller({	 velocity: 85, movetype: 'pingpong', onmouseover: 'play', onmouseout: 'play'  });

	//create soccer ball bouncing animation...
	$('#soccer_ball').bind('bouncer', function(){
			$(this).animate({top:42}, 500, 'linear').animate({top:5}, 500, 'linear', function(){$('#soccer_ball').trigger('bouncer');});			
	}).trigger('bouncer');

});
//-->
</script>

Soccer CSS:

#soccer_ball_container{width:500px;height:80px;}
#soccer_ball_container .scrollingtext{width:40px;height:80px;}
#soccer_ball{display:block;position:absolute;top:0px;left:0px;}

</p>
<div class="horizontal_scroller" id="soccer_ball_container">
	<div class="scrollingtext"><img id="soccer_ball" src="http://www.vegabit.com/jquery_scroller/soccer_ball.gif" /></div>
</div>
<p>

</p>
<div class="horizontal_scroller" id="no_mouse_events">
	<div class="scrollingtext">this is a scrolling text!</div>
</div>
<p>

In another tutorial i will include more scrollers and more ways on how to edit the jQuery speed, pause, and more. This is for the people who know where to insert the code already in html, css and javascript.

More Scrollers [Demo] | Download jqScroller v1.0

Did this post help you? Please comment below.