PDA

View Full Version : Javascript snow


Jeremy Clarkson
12-24-2007, 12:00 AM
Hi

I was wondering, I found a script for my website that makes falling snow appear on your webpage. Since it is javascript based I was wondering whether it is allowed. You can see an example of it on my forum (which is not my main site, it is only a support foum and I dont submit my link to katz from it) at http://forum.rsddl.com. I am not planning on keeping it on the forum as it mucks up the backround image and you can barly see it as the theme is white however it would look good on my site and before I submit any new links to katz I was wondering whether this is allowed. Main site (http://rsddl.com)

Regards and Merry Christmas,

RSDDL Admin

P.S I would apprieciate an answer as soon as possible as it is christmas soon!

HardHead
12-24-2007, 01:55 AM
Most of us have it already installed on our site and haven't been banned, so yea i would think it is ok.;)

Cøbra
12-24-2007, 03:00 AM
OK, everyone's banned. :P

LOL, c'mon, we don't ban for stuff like this.

Personally, I like this one: http://www.schillmania.com/projects/snowstorm/

Baby Jesus
12-24-2007, 05:16 AM
Here's a different one for you, as used on my site:


//Snow - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 40; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}


if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}


function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}


function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}


function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;

if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}


function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}


if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}

})();
}//End.

To embed, use this code on any html page on your site, making sure to replace the "yoursite.com/path/to" with the correct path:

<script type="text/javascript" src="http://www.yoursite.com/path/to/snow.js"></script>

Jeremy Clarkson
12-24-2007, 11:57 AM
LOL, Wow thanx for the quick reply. I am already useing that one, cobra, it looks like proper snow and all the other ones look like snow magnified a thousand times. Here is a great list in photo mats blog (the guy who made wordpress) http://photomatt.net/2007/12/23/falling-snow-script/

Merry Christmas and a Happy New Year to all of you!