Background animation using jQuery

· 3 Comments · in JavaScript, 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.

This entry was posted in JavaScript, jQuery and tagged , , , .
Bookmark the permalink.

3 Responses to Background animation using jQuery

  1. overthumbs says:

    Not the answer you re looking for? Browse other questions tagged jquery background jquery-animate or ask your own question .

  2. I visit your blog quite regulary, especially the posts about movies and TV shows.
    Generally, I agree with your assessments, but not all the time.
    Some movies seem to me not worthy of attention and time spent.
    In any case, this blog post is very much in line
    with my position and I shared it on my site, for which my guys were thankfull.
    I hope that you will not finish posting to the blog and will delight us with
    new information. Thank you!

  3. Lauri says:

    I read your site quite regulary, especially the posts about films and TV shows.
    Always, I agree with your assessments, but not always.
    Some movies seem to me not worthy to watch and time spent.
    Anyway]Anyhow, this text is very much in line with my view and I posted it
    on my website, for which my friends were grateful. I hope that you will not stop posting
    to the blog and will pleasure us with new texts. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

To include code in your comment: Paste your code in the comment form, select it and then click the language link button below. This will wrap your code in a <pre> tag(or shortcode) and format it when submitted.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">