Sami's Site: Extras and Fun Stuff
|
   |
Index · Multiple Floating images · Floating image - animated · Falling image - Leaves or Snow · Curled Corner Ad: Pageear
Falling image - Leaves or Snow
This simple script allows you to put fun falling images over your web page. Could be leaves or snow or anything else you want to FALL DOWNWARD ONLY. If you want floating images, use a different script.
I have broken the script into pieces to better explain elements of it for better understanding.
None of the code was placed into the HEAD of the this page.
1) Capture the image or use one of your own.
Right click on one of these images to save each to your computer.
You can only use ONE image at a time for this code and it is loaded many times to create the effect.
Or you can use your own images. If you use your OWN images, be sure to adjust the SIZE of the images in the code below to match.
2) Capture the code.
To capture the code, press Select All then COPY the contents.
Paste code into your page, near the top of your web page.
 Not using CSB or Trellix: REMOVE each ^gEMDIR/ from the script! Use FTP program to upload the js and balloon images to your website space.Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components .(webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code!  CODE NOTES:
^GEMDIR/ - Not using CSB/Trellix? Remove this and use FTP or file manager to upload image files to your webspace directly. Then enter the full path to the image.
^GEMDIR/ - Using CSB/Trellix? MUST have this in ALL CAPS for the code to work. CSB will upload the files to your webspace for you if you use this and put the images into webcomponents!
snow.gif - change each image name to match YOUR image names
configure other options - chang number to change how many images, and disappearance
The color changes, etc can effect functionality! Use the Select All above and modify!
<script type="text/javascript">
/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
* Using CSB or Trellix: use an INSERT HTML box to hold your script and put your js and images into web components (webgem in Trellix). Then you MUST change each gEMDIR to GEMDIR before using code!
******************************************/
//Configure below to change URL path to the snow image
var snowsrc="^GEMDIR/snow.gif"
// Configure below to change number of snow to render
var no = 20;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
TWO IMPORTANT TIPS:
1) ALWAYS make sure your image names are exactly the same in the code and the name. No spaces or characters (other than _) and caps count! TN_image is not the same as tn_image. Recommend using only lowercase instead of caps.
2) Optimize your photos for fastest loading. Don't put an image on your site directly from your digital camera. It will take WAY too long to load!
|