Auto Scrolling background animation with jQuery.


In this case it is coded for a button image; using jquery for browser compatibility very much the same way as the  html canvas fire animation was created last week.

<style>
#button {
	background-image:url(strip.jpg);
	width:250px;
	height:150px;
	background-position: -1px 0px;
}
</style>
<div id="button">

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">
</script>

<script>

var left = 0;
var direction = -1;

setInterval(function(){

	left+=direction;
	$('#button').css('background-position', left+' 0px');
	if (left < 250-1442) {direction = 1;}
// note image width 1442 pixels, button width 250 pixels, 
// negative left is how many pixels
// are cropped off on the left side.

	if (left > -1) {direction = -1;}
},50);

</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: