Falling Snow

[davids]

Firstly please excuse me if this is the wrong forum for this.

I am a self taught novice in FP and have a web site for our childrens footy club. Most years I put falling snow on the front page, however this year I would like to make it snow again but if possible build up on top of our club name, the way it would do for real.

Like I said I am self taught and trying hard to learn this.

Thanks for any help or bit of code that might do this.

by the way the web sit of the club is www.westwoodwanderers.com

[xahx]

u want falling snow on the page? or is it already on there? can you give me an example?

[nighthawks]

You have design a Good website,
But what do you want to know...

[BLiZZaRD]

To accumulate snow ONLY on the logo will be near impossible. JS can do a snow effect as can Flash, both can accumulate, but accumulating in a specific area only I don't know how easily it can be done (if at all) in JavaScript.

I would suggest doing the logo in Flash, with a snow accumulation there, then put that on the page, where you have your normal snow effect.

This way you would have 2 separate items snowing, but the logo would be the only build up. At the same time you would have snow all over the page.

This thread (http://www.dynamicdrive.com/forums/showthread.php?t=15414) has a similar issue.

[xahx]

found a perfect example! http://www.christmasboatparade.com/

[BLiZZaRD]

Thats a lot of lag for 10 flakes at a time. And there is no accumulation to speak of.

[xahx]

<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
******************************************/

//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 = "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)? "../img/common/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>


think thats it, just add that and have this image linked correctly...snow.gif or whatever graphic u wish to use.

[Schmoopy]

That's still only for falling snow, which we all know can be done.

The thing that needs to be figured out is the accumulation of snow at the bottom of the logo.

[Snookerman]

How about just making a snow-covered logo in photoshop and then have the snow as you normally do? I'm sure it would look good. If you want all the snow to accumulate on the logo, you could maybe divide the page in three parts and let the snow fall normally on the sides, whiles in the middle it should stop by the logo. This division might be possible with the code as well, but my point is, you should do the accumulated snow in photoshop because that is by far the simplest solution. Could you post the code you use for the snow so we can take a look and see if we can make it stop at the logo?

[davids]

Thanks for all of the replies.

Just to recap I would have liked snow to fall over the page, (I can do this bit) but would have liked it to build up on or club name and or any bits on the front page and then just to clear away and start again, giving the appearance of snow building up on objects as it falls.

I have been away working and just got back so I will start to have a look at you suggestions.

Like I said I am self taught and being old for this sort of thing to learn new (over 19 is too old to use PC according to my kids) it may take me a while to do it.

Anyway thanks again for all of your help, I will start to play this afternoon and no doubt come back with even more questions

Regards

David

[Schmoopy]

Well, you're probably going to have to make the logo into an embedded .swf file that plays separately to the snow falling but which slowly builds up over time, and then just having snow stop when it reaches the logo.

You'll have to find some tutorials on flash if you don't already know how to do it.

Or maybe one of the kind people here may be of assistance :)

[BLiZZaRD]

echo echo echo.... :p