Scroll Layer Right 2

<script type="text/javascript">

var startpos= 0 //
var stoppos=100 // left stop position
var Last=""
var previous="yourID_One"
var sliding=0
var L_Timer=""

function Init(layernum){
if(sliding==1){return} // prevent 2 layers sliding
if(previous==layernum){return} 
else{
slideRight(layernum)
Sim_Return() // simultaneous slideback
}
}

function slideRight(layernum){
sliding=1 // running
Last=previous // previous layernum
posnow=parseInt(document.getElementById(layernum).style.left) // current left position
if(posnow>stoppos-30){
posnow+=2;}
else{
if(stoppos>posnow){
posnow+=5;}
}
document.getElementById(layernum).style.left=posnow //new left position

document.getElementById(layernum).style.zIndex="1" // make active layer top
document.getElementById(Last).style.zIndex="" // make previous layer bottom

L_Timer=setTimeout("slideRight('"+layernum+"')",50);

if(posnow>=stoppos){
posnow==stoppos
sliding=0
clearTimeout(L_Timer);
previous=layernum //
}
}

startpos2=startpos
posnow2=stoppos
function Sim_Return(){
sliding=1

//if(Last==0){sliding=0;return}
if(document.getElementById(Last).style.left==startpos){return}
if(posnow2<=startpos2+30){
posnow2-=3}
else{
posnow2-=10;}

document.getElementById(Last).style.left=posnow2 // current right position
R_Timer=setTimeout("Sim_Return('"+Last+"')",50);

if(posnow2<=startpos2){
sliding=0
clearTimeout(R_Timer);
document.getElementById(Last).style.left=startpos2 // prevent overshoot
posnow2=stoppos
}
}

</script>
 
<DIV style="position:absolute;left:0;top:100;width:100;height:400;clip:rect(0,202,400,100)">

<div id="yourID_One" style="position:absolute;left:100; top:0;z-index:2;width:100;background-color:green">
Layer 1 Contents
</div>

<div id="yourID_Two" style="position:absolute;left:0; top:0;z-index:2;width:100;background-color:gold">
Layer 2 Contents
</div>

<div id="yourID_Three" style="position:absolute;left:0; top:0;z-index:2;width:100;background-color:red">
Layer 3 Contents
</div>

<div id="yourID_Four" style="position:absolute;left:0; top:0;z-index:2;width:100;background-color:blue">
Layer 4 Contents
</div>

</DIV>

Scroll Right 2

<script type="text/javascript">

var startpos= 0 //
var stoppos=100 // left stop position
var Last=""
var previous="yourID_One"
var sliding=0
var L_Timer=""

function Init(layernum){
if(sliding==1){return} // prevent 2 layers sliding
if(previous==layernum){return} 
else{
slideRight(layernum)
}
}

function slideRight(layernum){
sliding=1 // running
Last=previous // previous layernum
posnow=parseInt(document.getElementById(layernum).style.left) // current left position
if(posnow>stoppos-30){
posnow+=2;}
else{
if(stoppos>posnow){
posnow+=5;}
}
document.getElementById(Last).style.left=startpos
document.getElementById(layernum).style.left=posnow //new left position

L_Timer=setTimeout("slideRight('"+layernum+"')",50);

if(posnow>=stoppos){
posnow==stoppos
sliding=0
clearTimeout(L_Timer);
previous=layernum //
}
}

</script>
 
<DIV style="position:absolute;left:0px; top:100px;width:100px;height:400px;clip:rect(0,202,400,100)">

<div id="yourID_One" style="position:absolute;left:100; top:0;z-index:2;width:100;background-color:green">
Layer 1 Contents
</div>

<div id="yourID_Two" style="position:absolute;left:0; top:0;z-index:2;width:100;background-color:gold">
Layer 2 Contents
</div>

<div id="yourID_Three" style="position:absolute;left:0; top:0;z-index:2;width:100;background-color:red">
Layer 3 Contents
</div>

<div id="yourID_Four" style="position:absolute;left:0; top:0;z-index:2;width:100;background-color:blue">
Layer 4 Contents
</div>

</DIV>

Scroll Right 3

<script type="text/javascript">

var startpos= 0 //
var stoppos=100 // left stop position
var Last=""
var previous="yourID_One"
var sliding=0
var L_Timer=""

function Init(layernum){
if(sliding==1){return} // prevent 2 layers sliding
if(previous==layernum){return} 
else{
slideRight(layernum)
Sim_Return() // simultaneous slideback
}
}

function slideRight(layernum){
sliding=1 // running
Last=previous // previous layernum
posnow=parseInt(document.getElementById(layernum).style.left) // current left position
if(posnow>stoppos-30){
posnow+=3;}
else{
if(stoppos>posnow){
posnow+=5;}
}
document.getElementById(layernum).style.left=posnow //new left position

document.getElementById(layernum).style.zIndex="1" // make active layer top
document.getElementById(Last).style.zIndex="" // make previous layer bottom

L_Timer=setTimeout("slideRight('"+layernum+"')",50);

if(posnow>=stoppos){
posnow==stoppos
sliding=0
clearTimeout(L_Timer);
previous=layernum //
}
}

posnow2=stoppos
function Sim_Return(){
sliding=1
startpos2=parseInt(document.getElementById(Last).style.width)+parseInt(document.all["odiv"].style.width)
//if(Last==0){sliding=0;return}
if(document.getElementById(Last).style.left==startpos){return}
if(posnow2>=startpos2-30){
posnow2+=3}
else{
posnow2+=5;}

document.getElementById(Last).style.left=posnow2 // current right position
R_Timer=setTimeout("Sim_Return('"+Last+"')",50);

if(posnow2>=startpos2){
sliding=0
clearTimeout(R_Timer);
document.getElementById(Last).style.left=startpos // prevent overshoot
posnow2=stoppos
}
}

</script>

<DIV id="odiv" style="position:absolute;left:0px;top:100px;width:100px;height:400px;clip:rect(0,202,400,100)">

<div id="yourID_One" style="position:absolute;left:100;top:0;z-index:2;width:100;background-color:green">
Layer 1 Contents
</div>

<div id="yourID_Two"  style="position:absolute;left:0;top:0;z-index:2;width:100;background-color:gold">
Layer 2 Contents
</div>

<div id="yourID_Three"  style="position:absolute;left:0;top:0;z-index:2;width:100;background-color:red">
Layer 3 Contents
</div>

<div id="yourID_Four"  style="position:absolute;left:0;top:0;z-index:2;width:100;background-color:blue">
Layer 4 Contents
</div>

</DIV>

Scroll Layer Right 2

Scroll Right 1

Scroll Right 2

Scroll Right 3