Fade In / Fade Out

This script sets your page to fade in upon loading and optionally fade out on unloading.  After fading in, your page information will load. You can modify the colors by changing the RGB settings, and adjusting the speed. Check out the samples below.

  • Kouichirou Eto is the author of this script.  Please give credit where credit is due by copying the script exactly and retaining the copyright information.

<script language="JavaScript">
<!--

/* Fade Script v0.1 by Kouichirou@Eto.com 1996
* Copyright (c) 1996 Kouichirou Eto. All Rights Reserved.
* You can freely copy, use, modify this script,
* if the credit is given in the source.
* If you would like to get information for this script,
* please access <http://eto.com/JavaScript/> */

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++) this[i] = 0;
return this;
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a";
hexa[11]="b";
hexa[12]="c";
hexa[13]="d";
hexa[14]="e";
hexa[15]="f";

function hex(i) {
if (i < 0)
return "00";
else if (255 < i)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setbgColor(r, g, b) {
var hr = hex(r);
var hg = hex(g);
var hb = hex(b);
document.bgColor = "#"+hr+hg+hb;
}

function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0; i <= step; i++)
{
setbgColor(Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)),
Math.floor(sb * ((step-i)/step) + eb * (i/step)));
}
}

function fadein( ) {
fade(255,255,255, 0,0,0, 70);
}

function fadeout( ) {
fade(0,0,0, 255,255,255, 30);
}

fadein( );

//-->
</script>

<body unload="fadeout( )">

  • Values in red adjust the settings as follows:

(fade-in values, fade-out values, speed)

  • Fade-in and fade-out settings are entered as RGB values.   The speed can be set from 0 to 255 with 0 being the slowest and 255 for the fastest.
  • This script should be placed between the <Head> tags of the document and runs the fade-in function.  Fading out is an option to be set in the body tag.

Back to Web Tips