thanks for the tutorial, it’s great.

A little problem is the use of “(++count * length)” to define the tweening target. As this runs endless some desktop browsers are stopping the animation effect after some minutes.
I think it would be better to set the target to “length” and reset the background-position in the “run” function.

Feel free to edit that into my comment.

I put together a demo, but I won’t be able to get it online until later.


bgScroller = new Class({

Implements: [Events, Options],

options: {
duration: 40000
},

tweener: null,
length: 0,
count: 0,
verticalPosition: null,

run: function() {
this.tweener.tween('background-position', ('-' + (++this.count * this.length) + 'px ' + this.verticalPosition));
},

initialize: function(element, options){
this.setOptions(options);
this.tweener = element;
this.length = this.tweener.getSize().x;
this.verticalPosition = this.tweener.getStyle("background-position").split(" ")[1];
this.tweener.setStyle("background-position", ("0px " + this.verticalPosition));
this.tweener.set('tween', {
duration: this.options.duration,
transition: Fx.Transitions.linear,
onComplete: this.run.bind(this),
wait: false
});
this.run();
}

});


Then all you have to do is set separate instances of the class to each layer:


window.addEvent("domready", function() {
var frontScroller = new bgScroller($("front"), { duration: 9000 });
var middleScroller = new bgScroller($("middle"), { duration: 85000 });
var backScroller = new bgScroller($("back"), { duration: 55000 });
});