PDA

View Full Version : Snow Effect



Kovo
03-20-2007, 03:37 PM
1) Script Title: Snow Effect

2)http://javascript.aho.ru/example/xmp002/falling-snow-en.htm
http://www.dynamicdrive.com/dynamicindex3/snow.htm
3) Describe problem:
This script isnt really from here, but a link to it was found on this board and I just have a little question... why wont it work?
This is the snow script:

// Snowmaker, v. 1.2, 12/11/2006, checked in IE6,7; FF1.06,2.0; Opera 7.54,9.01
// Modified (c) 2005, Igor Svetlov, Nickname: 12345c
// Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Location: http://javascript.aho.ru/example/xmp002/falling-snow.htm
// Permission given to use the script provided that this notice remains as is.

d=document;g=function(X){return document.getElementById(X);}
var unitsNum=15 // Set the number of snowflakes (more than 30 - 40 not recommended)
var snowColor=["#c4bbcc","#ccddFF","#ccd6DD"]
// Set the colors for the snow. Add as many colors as you like
var unitFont=["Arial Black","Arial Narrow","Times","Comic Sans MS"]
// Set the fonts, that create the snowflakes. Add as many fonts as you like
var unitText=["<img src=leaf.png>","<img src=leaf2.png>","<img src=leaf21.png>","<img src=leaf22.png>","<img src=leaf23.png>","<img src=leaf24.png>","<img src=leaf25.png>","<img src=leaf26.png>","<img src=leaf27.png>","<img src=leaf28.png>"];
// Set the letter that creates your snowflake (recommended:*)
var sinkSpeed=0.3 // Set the speed of sinking (recommended values range from 0.3 to 2)
var snowSizeMax=90 // Set the maximal-size of your snowflaxes
var snowSizeMin=22 // Set the minimal-size of your snowflaxes
var snowingLeft=0.0 //left boundary of snow presence
var snowingWidth=0.3 //width of snow presence in window
var opac=1.0 //snowflakes opacity (0.0-1.0), at 1 it works faster in 2 times
var stepTime=70 //step of time-lapse animation(ms).At less 100 strongly loads processor
var snowOnScreen=1 // 1/0-regime of scrolling of page (snow on screen/snow on paper)
var marginBottom,marginRight,scrlTop=0;
var snow=[], x_mv=[], crds=[], lftRght=[];

var isOpera=self.opera
var ie5=d.all&&d.getElementById&&!isOpera
var ns6=d.getElementById&&!d.all
var opera9=isOpera&&(document.body.style.opacity=='')
var browserOk=ie5||ns6||isOpera
var ww=0,timer=0;
d.write('<div id=snowZone style=position:absolute></div>');
var unitsNumOld=0;
function createSnow(){
for(i=0;i<Math.max(unitsNum,unitsNumOld);i++){if(i<unitsNum){
var o=d.createElement('SPAN');
if(g('s'+i)){snowZone.replaceChild(o,g('s'+i));}
else{snowZone.appendChild(o);}
o.setAttribute('id','s'+i);
o.style.position='absolute';
o.style.top=0-snowSizeMax;
if(ns6)o.style.MozOpacity=opac;
if(opera9)o.style.opacity=opac;
if(ie5){o.style.filter='alpha';o.filters[0].opacity=opac*100;}
snowZone.childNodes[i].innerHTML=unitText[Math.floor(unitText.length*Math.random())];
}else{snowZone.removeChild(g('s'+i));}
}unitsNumOld=unitsNum;}
function randommaker(range){return Math.floor(range*Math.random())}

function botRight(){marginBottom=(ns6?innerHeight:d.body.clientHeight)-1.5*snowSizeMax;
marginRight=ns6?innerWidth:d.body.clientWidth;}
function checkPgDn(){if(snowOnScreen)g('snowZone').style.top=ns6?pageYOffset:document.body.scrollTop;
scrlTop=ns6?pageYOffset:document.body.scrollTop;}
function snowRestart(s){ if(s)eval(s);
createSnow();
snowSizeRange=snowSizeMax-snowSizeMin;
clearInterval(ww);clearTimeout(timer);
checkPgDn();if(ns6)ww=setInterval(checkPgDn,999);
botRight();
for (i=0;i<unitsNum;i++) { crds[i] = 0;
lftRght[i] = Math.random()*20;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=g("s"+i)
snow[i].style.fontFamily=unitFont[randommaker(unitFont.length)]
snow[i].style.fontSize=snow[i].size=randommaker(snowSizeRange)+snowSizeMin;
snow[i].style.color=snowColor[randommaker(snowColor.length)]
snow[i].sink=sinkSpeed*snow[i].size/5
newPosSnow(randommaker(marginBottom-3*snow[i].size),i);
}if(unitsNum)moveSnow();else{clearTimeout(timer);clearInterval(ww);}
}
function newPosSnow(y,i){var o;
snow[i].posY=y+(snowOnScreen?0:(ns6?pageYOffset:d.body.scrollTop));
snow[i].posX=randommaker(marginRight*snowingWidth-2*snow[i].size)+marginRight*snowingLeft;
snow[i].size=randommaker(snowSizeRange)+snowSizeMin;
if(snow[i].hasChildNodes()&&(o=snow[i].childNodes[0]).tagName=='IMG')o.width=o.height=randommaker(snowSizeRange/1.6)+snowSizeMin;
if(ie5)snow[i].filters[0].opacity=opac*100;if(ns6||opera9)snow[i].style.opacity=opac;
setTimeout("snow["+i+"].style.visibility='visible';",250);
}
function moveSnow() {
for (i=0;i<unitsNum;i++) {
snow[i].style.top=snow[i].posY+=snow[i].sink+lftRght[i]*Math.sin(crds[i])/3;
crds[i] += x_mv[i];
snow[i].style.left=snow[i].posX+lftRght[i]*Math.sin(crds[i]);
var a=marginBottom+(snowOnScreen?0:scrlTop)-snow[i].posY;
if(a<=9.5*snow[i].size){if(ie5)snow[i].filters[0].opacity=opac*a/(9.5*snow[i].size)*100;
else if(ns6||opera9)snow[i].style.opacity=opac*a/(9.5*snow[i].size);}
if(a<=0 || parseInt(snow[i].style.left)>(marginRight-3*lftRght[i])){snow[i].style.visibility='hidden';newPosSnow(-1.5*snow[i].size,i);}
}
timer=setTimeout(moveSnow,stepTime)
}
/*for (i=0;i<unitsNum;i++) {
d.write("<span id='s"+i+"' style='position:absolute;z-index:111;"+(opac<1?"-moz-opacity:"+opac+";filter:alpha(opacity="+(opac*100)+")":"")+";top:-"+snowSizeMax+"'>"
+unitText[Math.floor(unitText.length*Math.random())]+"</span>")
}*/
onload=function(){if(browserOk)setTimeout(snowRestart,99);}
onscroll=checkPgDn;
if(self.addEventListener)addEventListener('DOMMouseScroll',function(){setTimeout(onscroll,1)},!1);
onresize=botRight;
genBr5x=function(N){var s='';while(N>0){s+=N+'<br><br><br><br><br>';N-=5;}return s;}

The issue is with the onload event.
The two example links below demonstrate how the two onload callers I have on my page interfear with each other.

Both pages are identical except for:
page 1 http://www.kovo.ca/audrey/home1.html
^^ This page has the added lines " <body onload="Effect.Appear('firstfade',{delay:0.5, duration:6.0});Effect.Appear('secondfade',{delay:1.5, duration:9.0});Effect.Appear('main',{delay:6.0, duration:5.0});"> "

page 2 http://www.kovo.ca/audrey/home2.html
^^ This page omits the onload calls in the body tag

Any ideas for solutions?

Thanks