Falling Snow / Leaves background revision

[ViRoy]

I thought I would share a sweet modification I made to the Falling Snow code.

Changes I have made:
-Snow / leaves now fall at independently random rates creating a much more natural feel.
-Increased the horizontal move distance of falling snow / leaves due to increased speed.
--------------------------------------------------------------------------------










<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Random Fall Rate modification by ViRoy
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
*This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;
// 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 = "windowheight";

///////////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)? "snow3.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width - 20); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*30; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = Math.random() * 5 ;
if (sty[i] < .5) {sty[i]=1} // 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] = Math.random() * 5 ;
if (sty[i] < .5) {sty[i]=1}
}
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>

[ViRoy]

The code I modified was obtained from the link below.
You can also preview the origional fall rates.

http://www.dynamicdrive.com/dynamicindex3/snow.htm

[Wedgy]

I have a question: Can it be reversed (upward) for realistic bubbles?,
and would animated GIFs slow everything down too much?
I was thinking a bit of non-static image trickery might improve it more!

Say, twinkling/rotating snowflakes, or twisting leaves, or popping bubbles.
If speed became a problem, there might be a way to streamline the code more,
or have one or two less images. A whole pile of ideas come to mind for small moving things.

Can it be made to operate horizontally?
How about spinning coins? or dancing leprochans. with the right background image,
you could have perhaps a kind of strip-tease effect.

Also, what about collisions between the floating objects?
How hard is that to add to the code?

It might be neat to have skydivers coming together in formation,
or hang-gliders criss-crossing.

Just a few ideas for cool and variety.

oh yeah one more: bungie jumpers...

[Twey]

Not to be too ambitious

[ViRoy]

Wedgy: you can accomplish everything you just asked... most of it will require alot of complex math alogrithms though, i dont have the time to rework this and accomplish tough factors like collisions. but it can be done no doubt. also, animated gif's do work great with this.

[12345c]

Greetings to all!
Let to present recently modified script of a falling snow.
I used other base script written earlier.

The summary.
Script of a falling snow. 28.12.2005 IE5 +, FF1.06 +, Opera7.54 +
Does not demand obligatory use of snowflakes picture.
Can show some kinds of snowflakes or the symbols similar to them.
The transparency of snowflakes or symbols and shade of color is established.
Speed of falling, the minimal and maximal sizes are adjusted.
The arrangement and width of a column in a window in which there will be a snow is fall.

Snowflakes are turned under own casual laws.
Process is steady against scrolling and change of the sizes of a window.
Less loading of the processor is less than snowflakes, the at viewing a window.

You can look demo on page http://javascript.aho.ru/example/xmp...ng-snow-en.htm

[12345c]

I have changed the script for support of transparency of snowflakes in Opera 9 +. Welcome to see example and to download : http://javascript.aho.ru/example/xmp...ng-snow-en.htm