The value of variable Layer_Num is the number of layers that are going to be scrolled.
For this example it is 5.
The time between the start of each layer scroll can be altered by changing the value of variable Interval.
Variable Limit is the position that the layers stop scrolling.
Variable Step is the increments that the layers scroll.
<script type="text/javascript">
// Realised by Jeff
// www.huntingground.freeserve.co.uk
Layer_Num=5 // number of layers
Interval=75 // interval before next layer scroll
Limit=0 // layer stop position
Step=20 // layer increment size, increase for faster scroll
Count =1;
ani=""
speed=""
PosX = new Array();
function setup(){ // get default start position based on first layer
X=document.getElementById("oDIV1").style.pixelLeft
Y=document.getElementById("oDIV1").style.pixelTop
init()
}
function init(){
clearTimeout(ani)
for (i = 0; i < Count-1; i++) {
PosX[i] = document.getElementById("oDIV"+i).style.pixelLeft // x initial position
}
animate()
if(Count>Layer_Num){
Count=Layer_Num
clearTimeout(speed)
}
else{
speed=setTimeout("init()",Interval)
}
Count++
}
function animate() {
clearTimeout(ani)
for (p = 0; p < Count-1; p++) {
PosX[p] = document.getElementById("oDIV"+p).style.pixelLeft
PosX[p] += Step
if (PosX[p] >Limit+1) { // when layer reaches limit, keep layer at limit
PosX[p] = Limit+1
}
document.getElementById("oDIV"+p).style.pixelLeft = PosX[p] // x position
}
ani=setTimeout("animate()", 50); // speed
if (PosX[Layer_Num-1] ==Limit+1) { // when last layer reaches limit, stop animation
clearTimeout(ani)
}
}
function oreset(){ // reset layers back to default position
for (p = 0; p < Count-1; p++) {
document.getElementById("oDIV"+p).style.pixelLeft =X
PosX[p] = 0
}
Count=1
setTimeout("init()", 1000)
}
setTimeout("setup()", 1000)
</script>
<div id="oDIV0" style="position:absolute;left:-100;top:70;width:100;height:50">Example</div>
<div id="oDIV1" style="position:absolute;left:-100;top:120;width:100;height:50">Of</div>
<div id="oDIV2" style="position:absolute;left:-100;top:170;width:100;height:50">Multi</div>
<div id="oDIV3" style="position:absolute;left:-100;top:220;width:100;height:50">Layer</div>
<div id="oDIV4" style="position:absolute;left:-100;top:270;width:100;height:50">Scrolling</div>