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

Code:

<!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

Code:

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:

Code:

<!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/s.../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

@\\.\ 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?

Thread: Change the snowfall

Thread Tools

Search Thread

Change the snowfall

Similar Threads

ajaxcars.zip how to change url on change of div

on change(dropdown) change 2 div

Change CSS if x-mas

Html change on click, change to another html when clicked again

Snowfall Effect Without snow.js File

Bookmarks

Bookmarks

Posting Permissions