|
This
script by Kurt
Grigg uses an external image file to create the
falling snow effects. You can copy the five images
for the script below. Copy and Ctrl-V the code and
script below into Insert HTML elements and follow
the directions for placement of the elements. This
script version incorporates Stan
Bisson's
workaround for the <body onLoad> command to
allow it to work with Sitebuilder.
Be sure to keep the adjustments for the images (in
red). Demo: On this page. If you can't see
them, be sure you have JavaScript enabled on your
browser. The light bluish flakes really would look
best on a darker page. Note: This script does not
work with Mozilla Firefox users. If you wish to use
one that does work in Firefox, check
out my adaptation of Kurt's other DHTML script
using different snowflakes.
1)
Place this code into one Insert HTML element, resize
as small as possible, and put element in the top
left corner of the page. This is an altered code to
allow it to work with Sitebuilder.
<img
src="/tp.gif" width="1"
height="1" onLoad="fall()">
2)
Place this script into the second Insert HTML
element and place on the page. Do not overlap with
other elements.
<!-- paste in body -->
<script language="JavaScript">
<!-- fall Script by [email protected]
Amount=20; //Smoothness! depends on image file size, the smaller the size the more you can use!
//Pre-load your image below!
Image0=new Image();
Image0.src="files/flake1.gif";
Image1=new Image();
Image1.src="files/flake2.gif";
Image2=new Image();
Image2.src="files/flake3.gif";
Image3=new Image();
Image3.src="files/flake4.gif";
Image4=new Image();
Image4.src="files/flake5.gif";
grphcs=new Array(5)
grphcs[0]="files/flake1.gif"
grphcs[1]="filesflake2.gif"
grphcs[2]="files/flake3.gif"
grphcs[3]="files/flake4.gif"
grphcs[4]="files/flake5.gif"
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*3+2;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+2;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else{
si[i].style.pixelLeft=Xpos[i];
si[i].style.pixelTop=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',10);
}
//-->
</script>
|
