Submit your widget

very cool background animation with jquery

Created 12 years ago   Views 14727   downloads 2486    Author css3forum
very cool background animation with jquery
View DemoDownload
Share |

This is a cool background animation with jquery.

Hear is all jquery code:

(function($) {
$.fn.animatedBG = function(options){
var height = $(this).height();
var width = $(this).width();
var parts =;
var parts_width = width/parts;
var bg_image = $(this).css("background-image");
var animationWidth = options.animationWidth;

if (animationWidth == 'auto' || animationWidth == undefined) {
animationWidth = parts_width;

for (i=1;i<;i++)

$(this).find(".bg_part_"+i).css("float", "left");
$(this).find(".bg_part_"+i).css("background-image", bg_image);
$(this).find(".bg_part_"+i).css("background-position", "-"+parts_width*(i-1) + "px 0");
$(this).find(".bg_part_"+i).css("width", parts_width);
$(this).find(".bg_part_"+i).css("height", height);

$(this).find(".bg_part_"+i).hover(function() {
$(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1)-animationWidth + "px 0"});
} , function() {
$(this).animate({backgroundPosition: "-"+parts_width*($(this).attr("rel")-1) + "px 0"});



And now I will explain you how it`s works. First you need to copy all code to new file, for example animatedBG.js and add to your page header . Now you can call this script like this:

jQuery(document).ready(function() {
	var options = {
		parts: 10,
		animationWidth: 146

Option “parts” means in how many parts your background will be split and option “animationWidth” means how far background will go to left during the animation. In “animationWidth” you can also set to “auto” then “animationWidth” will be the same as background split white. You need to use this script on page element who have some background.

The article source: