Unofficial Tips and Tutorials for Homestead SiteBuilder™ Users


Home - Tips & Tutorials - JavaScript Demos - Java Applet Demos - Resources - Contact

Snow Image Script by Kurt Grigg >>>

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 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. Plus adjustments needed to call up the graphics from your Files directory (in bold red).

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.

Copy these snowflake images to your hard drive

flake1 flake2 flake3 flake4. flake5.

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 kurt.grigg@virgin.net

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]="files/flake2.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>

Formerly hosted at
www.geocities.com/ramblingtutor/

Home - Tips & Tutorials - JavaScript Demos - Java Demos - Resources - Contact

Webpage graphics by Arride Graphics
Copyright © 2000- Rambling Tutor and JanetS
All Rights Reserved
All other copyrights belong to their respective owners as noted.


Plus 260 visitors before joining Site Meter on June 11, 2001