Background animation using jQuery

You can actually animate a background image with jQuery – though it’s not as easy as it sounds.

There are cross-browser concerns.

I’ve tested many ways to achieve it and in this post there is code that should work cross-browser. Let’s dig in…

At first I thought this would be simple – just use jQuery .animate() to change the background position on an element, right?

Wrong.

Turns out that an element style with two values, like background-position, is not officially “supported” with .animate().

Also, IE handles the value differently, as do other browsers. It will work in some browsers which makes it even more confusing.

There’s plug-ins out there that will probably accomplish this nicely, but i have not looked into them. Wanted to achieve this myself as an exercise.

We will have an element with a field of stars as a background:

Markup
We are setting two attributes on our element, “data-speed” and “data-direction”. Starting with 1, you can increase the speed of the animation by increasing the number of the “data-speed” attribute. Setting to 0 will disable animation. The “data-direction” attribute will take a value of “up”, “down”, “left” or “right”.

<div class="space" data-speed="1" data-direction="left"></div>

CSS

.space {
	width:650px;
	height:100px;
	position:relative;
	background:#000 url(bg_space.jpg);
	overflow:hidden;
	clear:both;
}

jQuery
The animation is processor intensive since it loops every 1/100 of a second to make sure the animation is smooth.

function animateBg(obj,s,d){
	if( typeof s === "undefined" ){
		var s = parseFloat( $(obj).attr("data-speed") );
		if( s === 0) {
			return false;
		}
	}
	if( typeof d === "undefined" ){
		var d = $(obj).attr("data-direction");
	}
	//set background-position if not exist
	if( typeof $(obj).css("background-position") === "undefined" ){
		$(obj).css("background-position","0 0");
	}
	
	var _bgPos = $(obj).css("background-position").split(" ");
	switch( d ){
			case "up":
				var _x = 0;
				var _y = parseFloat(_bgPos[1]) - s;
				break;
			case "down":
				var _x = 0;
				var _y = parseFloat(_bgPos[1]) + s;
				break;
			case "left":
				var _x = parseFloat(_bgPos[0]) - s;
				var _y = 0;
				break;
			case "right":
				var _x = parseFloat(_bgPos[0]) + s;
				var _y = 0;
				break;
	}
	
	var _temp = $("<div></div>");
	$(_temp).animate({
			opacity:1
		},10,function(){
			$(obj).css("background-position", _x.toString()+" "+_y.toString() );
			animateBg(obj,s,d);
		}
	);
}

You initialize the function by passing it the element object:

animateBg( $(".space") );

Put it all together and you can see the example here.

Tested in:
jQuery version 1.7.2, 1.8
FF 3.6+, Safari, Chrome, IE8+
iOS

Great books are available on JavaScript and jQuery.