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();