Multi - Layer Scrolling 4

Reset











<script type="text/javascript">
// Realised by Jeff
// www.huntingground.freeserve.co.uk
endposY=new Array(100,130,160,190,220,250) // layers stop position

Interval=350 // interval before next layer scroll
Step=20 // layer increment speed
ani=""
ani2=""
speed=""
Limit=10 // layer stop position
PosY = new Array();
PosX = new Array();

function animate() { 

clearTimeout(ani)
for (p = 0; p < endposY.length; p++) {
PosX[p] = parseInt(document.getElementById("oDIV"+p).style.left)
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.left = PosX[p] // x position
}
ani=setTimeout("animate()", 50); // speed
if (PosX[endposY.length-1] ==Limit+1) {  // when last layer reaches limit, stop animation 
clearTimeout(ani)
animate2()
}
}

next=0
function animate2() { 
clearTimeout(ani2)

for (p = next; p < endposY.length; p++) {
PosY[p] = parseInt(document.getElementById("oDIV"+p).style.top)
PosY[p] += Step

if (PosY[p] >endposY[p]) { // when layer reaches limit, keep layer at limit
PosY[p] = endposY[p]
next++
}
document.getElementById("oDIV"+p).style.top = PosY[p] // x position
}
ani2=setTimeout("animate2()", 50);// speed

if (PosY[endposY.length-1] >=endposY[endposY.length-1]) { // when last layer reaches limit, stop animation
clearTimeout(ani2)
}
}

function oreset(){ // reset layers back to default position
for (p = 0; p < endposY.length; p++) {
document.getElementById("oDIV"+p).style.top = 100 // x position
document.getElementById("oDIV"+p).style.left = -200 // x position
PosY[p] = 0
next=0
}
setTimeout("animate()", 1000)
}

setTimeout("animate()", 1000)

</script>

<style>
#styles DIV{
width:150;
height:30;
background-image:url(image.jpg);
text-align:center;
}
</style>

<div id="styles">
<div id="oDIV0" style="position:absolute;left:-200;top:100)"></div>
<div id="oDIV1" style="position:absolute;left:-200;top:100)"></div>
<div id="oDIV2" style="position:absolute;left:-200;top:100)"></div>
<div id="oDIV3" style="position:absolute;left:-200;top:100)"></div>
<div id="oDIV4" style="position:absolute;left:-200;top:100)"></div>
<div id="oDIV5" style="position:absolute;left:-200;top:100" onclick="oreset()"><b>Reset</b></div>
</div>