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 (
// JavaScript Made Easy!! -

y = 0

function openCurtain(){
	y -= 5
	if (navigator.appName == "Netscape"){ = y
		aTop =
	else{ = y
		a =;
		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)
// -->

John Massam wrote:Add the following to your <BODY></BODY> tag:
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
	document.write("<span id='curtain' style='position:absolute;visibility:visible;top:0;left:0;background-color:black;'></span>"); = document.body.clientWidth; = document.body.clientHeight;
	stopPos = document.body.clientHeight * (-1);
// -->

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: ~08Jul00, addition made 12Jul00

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