|
How to I create a curtain effect?
|
 |
To make the background of your site open like a curtain, insert the following code into your HTML:
(You must change everything in Red, everything in Orange is optional)
- Put this in the HEAD of you HTML:
<HEAD>
<script language="JavaScript">
<!-- Hide from old browsers
xLeft = 0;
xRight = 0;
function openCurtain(){
xLeft -= 5
xRight += 5
if (navigator.appName == "Netscape"){
document.curtainLeft.left = xLeft
document.curtainRight.left = xRight
aLeft = document.curtainLeft.left
}
else{
document.all.curtainLeft.style.left = xLeft;
document.all.curtainRight.style.left = xRight;
a = document.all.curtainLeft.style.left;
aLen = a.length;
a = a.split("");
aLeft = ""
for (k = 0; k < aLen - 2; k++){
aLeft += a[k]
}
aLeft = new Number(aLeft)
}
if(aLeft > stopPos){
var timer=setTimeout("openCurtain()",10)
}
else{
if (navigator.appName == "Netscape"){
document.curtainLeft.visibility = document.curtainRight.visibility = "hide"
}
else{
document.all.curtainLeft.style.visibility =
document.all.curtainRight.style.visibility = "hidden"
}
}
}
// -->
</SCRIPT>
- Change your BODY tag to:
<BODY onLoad="openCurtain();">
- Put this in the BODY of you HTML:
<script language="JavaScript">
<!-- Hide from old browsers
if (navigator.appName == "Netscape"){
document.write('<layer name="curtainLeft" left="0" top="0" bgcolor="black" width="100" height="100" visibility="show"></layer>');
document.write('<layer name="curtainRight" left="0" top="0" bgcolor="black" width="100"
height="100" visibility="show"></layer>');
document.curtainLeft.clip.height = document.curtainRight.clip.height = window.innerHeight;
document.curtainLeft.clip.width = document.curtainRight.clip.width =
document.curtainRight.clip.left = (window.innerWidth/2) - 10
stopPos = "-" + window.innerWidth/2
}
else{
document.write("<span id='curtainLeft'
style='position:absolute;visibility:visible;top:0;left:0;background-color:black;'></span>");
document.write("<span id='curtainRight'
style='position:absolute;visibility:visible;top:0;left:0;background-color:black;'></span>");
xRight = document.all.curtainRight.style.left = document.all.curtainLeft.style.width =
document.all.curtainRight.style.width = document.all.curtainRight.style.left =
(document.body.clientWidth/2) - 10
document.all.curtainLeft.style.height = document.all.curtainRight.style.height = document.body.clientHeight;
stopPos = document.body.clientHeight * (-1);
}
// -->
</SCRIPT>
|
|
