jQuery Background Image Animation

In this tutorial, we are going to do HTML background image animation by using jQuery and CSS. In the previous tutorial, we have seen about HTML div autoload using jQuery AJAX for banner animation.

In this tutorial, we are animating image background by scrolling in vertical or horizontal direction. We are doing this by changing x or y position of the background image based on the direction selected.

jquery-background-animation

View DemoDownload

HTML Code for Background Animation

This code contains animated background image and a control to change the direction the scrolling animation.

<div id="scroll-bg"><h2>Scrolling Background</h2></div> 
<input type="hidden" id="direction" value="y" />
<input type="button" id="btnAction" value="Change Direction" onClick="changeDirection();" />

jQuery Image Background Animation

This code contains two functions. The scrollBg() function is used to change the background image position by using jQuery. In the function, we have used Javascript setInterval() to change position for every 10 seconds.

function scrollBg() {
	var x = 0;
	var y = 0;
	window.setInterval(function() {
		$("#scroll-bg").css("backgroundPosition", x + "px" + " " + y + "px");
		if($("#direction").val()=='x') x--;
		else y--;
	}, 10);
}

This function is used to change the direction of background image animation.

function changeDirection() {
	if($("#direction").val() == 'y') $("#direction").val('x');
	else $("#direction").val('y')
	scrollBg();
}

View DemoDownload

This jQuery code tutorial was published on December 3, 2014.

↑ Back to Top