jQuery: scrolling infinito sulle immagini di sfondo

Creare immagini di sfondo che scrollano in modo infinito è semplice con jQuery se si sa come operare sulla proprietà CSS background-position. Vediamo insieme i dettagli di questa soluzione.

Definiamo per prima cosa gli stili CSS:

#bg {
    width: 100%;
    height: 300px;
    background-image: url(image.jpg);
    background-repeat: repeat-x;
    background-size: contain; /* opzionale */
}

Con jQuery creiamo una funzione ripetuta che va ad operare sull'asse x della proprietà background-position:

var BackgroundScroll = function(params) {
	params = $.extend({
		scrollSpeed: 70,
		imageWidth: $('#bg').width(),
		imageHeight: $('#bg').height()
	}, params);
	
	var step = 1,
		current = 0,
		restartPosition = - (params.imageWidth - params.imageHeight);
	
	var scroll = function() {
		current -= step;
		if (current == restartPosition){
			current = 0;
		}	
		$('#bg').css('backgroundPosition', current + 'px 0');
	
	};
	
	this.init = function() {
		setInterval(scroll, params.scrollSpeed);
	
	};
};

var scroll = new BackgroundScroll();
scroll.init();