PDA

View Full Version : Change the snowfall



Mons
12-15-2013, 10:20 AM
Can anyone tell me how I get the snowflakes larger and increases the number of flakes in snow.js

vwphillips
12-15-2013, 02:30 PM
I have reworked the script
the options for number and size of flakes are in red


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<script type="text/javascript">
/*<![CDATA[*/
function snow(o){
var dy,dx,h = o.mk.offsetTop,w = o.mk.offsetLeft;
var s=window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
for (var i = 0; i < o.num; i++){
dy = o.fall[i];
dx = o.fall[i] * Math.cos(o.cstep[i]);
o.y[i]+=dy;
o.x[i]+=dx;
if (o.x[i] >= w-o.flakes[i].offsetWidth || o.y[i] >= h-o.flakes[i].offsetWidth){
o.y[i] = -o.sz;
o.x[i] = Math.round(Math.random() * w);
o.fall[i] = (o.sfs[i] == 1)?Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
o.step[i] = (o.sfs[i] == 1)?0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
o.flakes[i].style.top = o.y[i] + s[0] + 'px';
o.flakes[i].style.left = o.x[i] + s[1] + 'px';
o.cstep[i]+=o.step[i];
}
o.to=setTimeout(function(){ snow(o); },o.ms);
}


function init(o){
var o=typeof(o)=='object'?o:{},f=document.createElement('DIV'),ms=o.timer,sz=o.maxsize,sz=typeof(sz)=='number'&&sz>0?sz:5;
o.y=[];
o.x=[];
o.flakes=[];
o.fall=[];
o.sfs=[];
o.step=[];
o.cstep=[];
o.num=typeof(o.num)=='number'&&o.num>0?o.num:30;
o.ms=typeof(ms)=='number'&&ms>20?ms:30;
o.sz=sz;
f.style.backgroundColor=typeof(o.color)=='string'?o.color:'#ffffff';
f.style.zIndex='100';
o.mk=document.createElement('DIV');
f.style.position=o.mk.style.position='absolute';
o.mk.style.height=o.mk.style.width=o.mk.style.bottom=o.mk.style.right='0px';
document.body.appendChild(o.mk);
for (var i = 0; i < o.num; i++){
o.sfs[i] = Math.round(1 + Math.random() * sz);
f=f.cloneNode(false);
f.style.width=f.style.height=o.sfs[i]+'px';
f.style.top=f.style.left=-o.sfs[i]+'px';
document.body.appendChild(f);
o.cstep[i] = 0;
o.fall[i] = (o.sfs[i] == 1)?Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
o.step[i] = (o.sfs[i] == 1)?0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
o.flakes[i] = f;
o.y[i] = Math.round(Math.random()*o.mk.offsetTop);
o.x[i] = Math.round(Math.random()*o.mk.offsetLeft);
}
snow(o);
}

init({
num:35, // Number of flakes (default = 30)
timer:30, // setTimeout speed. Varies on different comps (default = 30)
maxsize:14, // the maximum size of the snow flake (default = 5)
color:'#ff0000' // the color of the flakes (default = '#ffffff')
});


/*]]>*/
</script>
</body>

</html>

Mons
12-16-2013, 09:00 PM
Thanks but im not interested in red squares falling down on my site

keyboard
12-16-2013, 10:55 PM
init({
num:35, // Number of flakes (default = 30)
timer:30, // setTimeout speed. Varies on different comps (default = 30)
maxsize:14, // the maximum size of the snow flake (default = 5)
color:'#ff0000' // the color of the flakes (default = '#ffffff')
});

If you change the color value to #ffffff then it should be white.

jscheuer1
12-17-2013, 12:37 AM
Yes and if you make the 'flakes' smaller they won't look like squares, and make the page background contrast, then you have something:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: black;
}
</style>
</head>
<body>
<script type="text/javascript">
/*<![CDATA[*/
function snow(o){
var dy,dx,h = o.mk.offsetTop,w = o.mk.offsetLeft;
var s=window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
for (var i = 0; i < o.num; i++){
dy = o.fall[i];
dx = o.fall[i] * Math.cos(o.cstep[i]);
o.y[i]+=dy;
o.x[i]+=dx;
if (o.x[i] >= w-o.flakes[i].offsetWidth || o.y[i] >= h-o.flakes[i].offsetWidth){
o.y[i] = -o.sz;
o.x[i] = Math.round(Math.random() * w);
o.fall[i] = (o.sfs[i] == 1)?Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
o.step[i] = (o.sfs[i] == 1)?0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
o.flakes[i].style.top = o.y[i] + s[0] + 'px';
o.flakes[i].style.left = o.x[i] + s[1] + 'px';
o.cstep[i]+=o.step[i];
}
o.to=setTimeout(function(){ snow(o); },o.ms);
}


function init(o){
var o=typeof(o)=='object'?o:{},f=document.createElement('DIV'),ms=o.timer,sz=o.maxsize,sz=typeof(sz)=='number'&&sz>0?sz:5;
o.y=[];
o.x=[];
o.flakes=[];
o.fall=[];
o.sfs=[];
o.step=[];
o.cstep=[];
o.num=typeof(o.num)=='number'&&o.num>0?o.num:30;
o.ms=typeof(ms)=='number'&&ms>20?ms:30;
o.sz=sz;
f.style.backgroundColor=typeof(o.color)=='string'?o.color:'#ffffff';
f.style.zIndex='100';
o.mk=document.createElement('DIV');
f.style.position=o.mk.style.position='absolute';
o.mk.style.height=o.mk.style.width=o.mk.style.bottom=o.mk.style.right='0px';
document.body.appendChild(o.mk);
for (var i = 0; i < o.num; i++){
o.sfs[i] = Math.round(1 + Math.random() * sz);
f=f.cloneNode(false);
f.style.width=f.style.height=o.sfs[i]+'px';
f.style.top=f.style.left=-o.sfs[i]+'px';
document.body.appendChild(f);
o.cstep[i] = 0;
o.fall[i] = (o.sfs[i] == 1)?Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
o.step[i] = (o.sfs[i] == 1)?0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
o.flakes[i] = f;
o.y[i] = Math.round(Math.random()*o.mk.offsetTop);
o.x[i] = Math.round(Math.random()*o.mk.offsetLeft);
}
snow(o);
}

init({
num:35, // Number of flakes (default = 30)
timer:30, // setTimeout speed. Varies on different comps (default = 30)
maxsize:3, // the maximum size of the snow flake (default = 5)
color:'#ffffff' // the color of the flakes (default = '#ffffff')
});
</script>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/demos/vic/snow.html

\\.\
12-17-2013, 10:51 PM
Hi Mons,

<whinge>This is a general issue that I see not just here but on several of the sites I visit or frequent and this is not a dig particularly at you but at people asking for help in general.

If someone gives you a script like Vic has and I know Vic, not personally, but see him out and about, he gives help and scripts freely as most of us do. What narks me off is when someone complains about what they didn't want or what won't work how they want it.

In simplest of terms, "Read" the script and understand things like the settings, it is obvious from your remark that you hadn't bothered to familiarise yourself with the code.

Whilst I apologize for this post, it is not an apology to all those who complain about scripts that don't do exactly what they ask, be grateful and finalize the script yourself and most sites offering help and advice on scripting in general are not repositories for "Requests".</whinge>

Ok?

keyboard
12-19-2013, 04:01 AM
@\\.\ (http://www.dynamicdrive.com/forums/member.php?87357) Please let the Moderators do their jobs. Posting respectfully here is important, but by complaining at Mons you're also posting impolitely.
Mons, if you have a question please ask it. Can you adjust the code for your needs?