Multi - Layer Scrolling

Reset






<script type="text/javascript">
// Realised by Jeff
// www.huntingground.freeserve.co.uk
Layer_Num=5 // number of layers
Interval=400 // interval before next layer scroll
Limit=100 // layer stop position
Step=20 // layer increment speed
Count =1;
ani=""
speed=""

PosY = new Array();

function setup(){ // get default start position based on first layer
X=document.getElementById("oDIV1").style.left
Y=document.getElementById("oDIV1").style.top
init()
}

function init(){ // initialise start positions
clearTimeout(ani)
for (i = 0; i < Count-1; i++) {
PosY[i] = document.getElementById("oDIV"+i).style.top // y initial position
}
animate()
if(Count>Layer_Num){
Count=Layer_Num
clearTimeout(speed)
}
else{
speed=setTimeout("init()",Interval) // start next layer scrolling
}
Count++
}

function animate() { 
clearTimeout(ani)
for (p = 0; p < Count-1; p++) {
PosY[p] = document.getElementById("oDIV"+p).style.top
PosY[p] += Step

if (PosY[p] >Limit) { // when layer reaches limit, keep layer at limit
PosY[p] = Limit
}
document.getElementById("oDIV"+p).style.top = PosY[p] // x position
}
ani=setTimeout("animate()", 50);// speed
if (PosY[Layer_Num-1] ==Limit) { // 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.top =Y // x position
PosY[p] = 0
}
Count=1
setTimeout("init()", 1000)
}

setTimeout("setup()", 1000)

</script>

<div id="oDIV0" style="position:absolute;left:50;top:-200;width:100;height:200">Example</div>
<div id="oDIV1" style="position:absolute;left:150;top:-200;width:100;height:200">Of</div>
<div id="oDIV2" style="position:absolute;left:250;top:-200;width:100;height:200">Multi</div>
<div id="oDIV3" style="position:absolute;left:350;top:-200;width:100;height:200">Layer</div>
<div id="oDIV4" style="position:absolute;left:450;top:-200;width:100;height:200">Scrolling</div>