Curtain Effect - Bottom to Top

Welcome to the show!!

This example works in both Netscape and MSIE. To make this happen I use a <LAYER> tag in Netscape and a <SPAN> tag in MSIE. Hopefully some day these browsers will be compatible with each other so we don't have to use 2 different methods for one effect.

Put these lines in your <head></head> tag.

<script language="JavaScript">
<!-- Hide from old browsers
// Copyright © 2000 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)
// JavaScript Made Easy!! - http://www.easyjavascript.com

y = 0

function openCurtain(){
	y -= 5
	if (navigator.appName == "Netscape"){
		document.curtain.top = y
		aTop = document.curtain.top
	}
	else{
		document.all.curtain.style.top = y
		a =  document.all.curtain.style.top;
		aLen = a.length;
		a = a.split("");
		aTop = ""
		for (k = 0; k < aLen - 2; k++){
			aTop += a[k]
		}
		aTop = new Number(aTop)
	}
	if(aTop > stopPos){
		var timer=setTimeout("openCurtain()",10)
	}
}
// -->
</script>

John Massam wrote:Add the following to your <BODY></BODY> tag:

onLoad="openCurtain();"

Now put this anywhere in the body of your web page.

<script language="JavaScript">
<!-- Hide from old browsers
if (navigator.appName == "Netscape"){
	document.write('<layer name="curtain" bgcolor="black" left="0" top="0"  width="100" height="100" visibility="show"></layer>');
	document.curtain.clip.height = window.innerHeight;
	document.curtain.clip.width = window.innerWidth;
	stopPos = "-" + window.innerHeight
}
else{
	document.write("<span id='curtain' style='position:absolute;visibility:visible;top:0;left:0;background-color:black;'></span>");
	document.all.curtain.style.width = document.body.clientWidth;
	document.all.curtain.style.height = document.body.clientHeight;
	stopPos = document.body.clientHeight * (-1);
}
// -->
</SCRIPT>

You can change the background color by editing BGCOLOR in the <LAYER> tag and BACKGROUND-COLOR in the <SPAN> tag. You can also put an image in there. Change the BACKGROUND-COLOR in the <SPAN> tag to background-image:url(YOUR IMAGE);. For the <LAYER> tag, change BGCOLOR to BACKGROUND="YOUR IMAGE"
Note: It will take a lot longer to bring the curtain up if you use an image.

You can adjust the speed of the curtain by changing the number in the following line.

		var timer=setTimeout("openCurtain()",10)

(I saw no change in speed between 1, 10, and 50 -- jcm 08Jul00)

Mirrored from JavaScript Made Easy at: http://www.easyjavascript.com/javascript.html ~08Jul00, addition made 12Jul00

Copyright © 1999 Doug Popeney - JavaScript Made Easy
All Rights Reserved. Legal Notice