• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Add-on Snow effect for winter

anotheralias

Well-known member
#3
Here's one that doesn't even use images. Just stick it above everything else in the logo template, (or scroll down for Brogan's instructions on calling it as a .js file) and adjust the colors, sizes and fonts to suit yourself. This one just has a few larger white flakes - if you range the colors from #bbbbbb through #ffffff and set it at a higher amount of snow you can have a nice little blizzard. This is not mine, but the necessary copyrights and permissions are in place in the code.

Code:
<script type="text/javascript">
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=3;

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#FFFFFF");

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("vrinda","verdana", "trebuchet ms", "times new roman", "lucinda sans","impact");

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*";

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.3
// Set the maximal-size of your snowflaxes
var snowmaxsize=48;

// Set the minimal-size of your snowflaxes
var snowminsize=24;

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1;

// duration is time in milliseconds of effect.
var start, duration=10000000;

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var snow=new Array();
var marginbottom;
var marginright;
var timer;
var i_snow=0;
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent;
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);
var ns6=document.getElementById&&!document.all;
var opera=browserinfos.match(/Opera/);
var browserok=ie5||ns6||opera;

function randommaker(range) {
rand=Math.floor(range*Math.random());
    return rand;
}

function initsnow() {
var d = new Date();
start=d.getTime();
if (ie5 || opera) {
  marginbottom = document.body.clientHeight;
  marginright = document.body.clientWidth;
}
else if (ns6) {
  marginbottom = window.innerHeight;
  marginright = window.innerWidth;
}
var snowsizerange=snowmaxsize-snowminsize
for (var i=0;i<=snowmax;i++) {
  crds[i] = 0;
    lftrght[i] = Math.random()*15;
    x_mv[i] = 0.03 + Math.random()/10;
  snow[i]=document.getElementById("s"+i);
  snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)];
  snow[i].size=randommaker(snowsizerange)+snowminsize;
  snow[i].style.fontSize=snow[i].size;
  snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
  snow[i].sink=sinkspeed*snow[i].size/5;
  if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
  if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
  if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
  if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
  snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size);
  snow[i].style.left=snow[i].posx+'px';
  snow[i].style.top=snow[i].posy+'px';
}
movesnow();
}

function movesnow() {
for (var i=0;i<=snowmax;i++) {
  crds[i] += x_mv[i];
  snow[i].posy+=snow[i].sink;
  snow[i].style.left=(snow[i].posx+lftrght[i]*Math.sin(crds[i]))+'px';
  snow[i].style.top=snow[i].posy+'px';

  if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
  if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
  if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
  if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
  if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
  snow[i].posy=0;
  }
}
var d = new Date();
    if((d.getTime()-start) < duration) {
    var timer=setTimeout("movesnow()",50);
        }
else {
    clearTimeout(timer);
        clearSnow();
        }
}

function clearSnow() {
var spans=document.body.getElementsByTagName('span');
var snowElms=[];
for(var i=0; i<spans.length; i++) {
  if(/^s\d+/.test(spans[i].id)) {
        snowElms.push(spans[i]);
        }
    }
for(var i=0; i<snowElms.length; i++) {
    document.body.removeChild(snowElms[i]);
    }
}

for (var i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"<\/span>");
}
if (browserok) {
window.onload=initsnow;
}
</script>
 

ArnyVee

Well-known member
#4
Here's one that doesn't even use images. Just stick it above everything else in the logo template, and adjust the colors, sizes and fonts to suit yourself. This one just has a few larger white flakes - if you range the colors from #bbbbbb through #ffffff and set it at a higher amount of snow you can have a nice little blizzard. This is not mine, but the necessary copyrights and permissions are in place in the code.
Do you have to put all of that code in the logo template or could you use a js file and call it?

If so, how do you do that? :D
 

anotheralias

Well-known member
#7
It's the kind of thing I could probably figure out by searching help forums, but I've never been motivated enough to do it. I just put a lot of space between the script and everything else.

And I will add - unlike those scripts that do require images, this one doesn't make the scroll bar move around in IE and nobody has ever had a problem with it so far.

Also, change the font to a . and the snow to various colors for confetti.
 

Brogan

XenForo moderator
Staff member
#8
Do you have to put all of that code in the logo template or could you use a js file and call it?

If so, how do you do that? :D
The best way to do something like that is to create a custom .js file such as snow.js and then use <xen:require js="js/xenforo/snow.js" /> to include it in the template.

You just need to change the file name/path to suit.
 

ArnyVee

Well-known member
#11
anotheralias,

Once you get it working you should release it as a 'template modification' here at xF for all to use :)

I've used this same type of script and then changed it to falling leaves during Autumn and falling hearts during Valentine's Day, etc. :D
 

Vincent

Well-known member
#12
Here's one that doesn't even use images. Just stick it above everything else in the logo template, and adjust the colors, sizes and fonts to suit yourself. This one just has a few larger white flakes - if you range the colors from #bbbbbb through #ffffff and set it at a higher amount of snow you can have a nice little blizzard. This is not mine, but the necessary copyrights and permissions are in place in the code.

Code:
<script type="text/javascript">
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=3;

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#FFFFFF");

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("vrinda","verdana", "trebuchet ms", "times new roman", "lucinda sans","impact");

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*";

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.3
// Set the maximal-size of your snowflaxes
var snowmaxsize=48;

// Set the minimal-size of your snowflaxes
var snowminsize=24;

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1;

// duration is time in milliseconds of effect.
var start, duration=10000000;

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var snow=new Array();
var marginbottom;
var marginright;
var timer;
var i_snow=0;
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent;
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);
var ns6=document.getElementById&&!document.all;
var opera=browserinfos.match(/Opera/);
var browserok=ie5||ns6||opera;

function randommaker(range) {
rand=Math.floor(range*Math.random());
    return rand;
}

function initsnow() {
var d = new Date();
start=d.getTime();
if (ie5 || opera) {
  marginbottom = document.body.clientHeight;
  marginright = document.body.clientWidth;
}
else if (ns6) {
  marginbottom = window.innerHeight;
  marginright = window.innerWidth;
}
var snowsizerange=snowmaxsize-snowminsize
for (var i=0;i<=snowmax;i++) {
  crds[i] = 0;
    lftrght[i] = Math.random()*15;
    x_mv[i] = 0.03 + Math.random()/10;
  snow[i]=document.getElementById("s"+i);
  snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)];
  snow[i].size=randommaker(snowsizerange)+snowminsize;
  snow[i].style.fontSize=snow[i].size;
  snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
  snow[i].sink=sinkspeed*snow[i].size/5;
  if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
  if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
  if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
  if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
  snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size);
  snow[i].style.left=snow[i].posx+'px';
  snow[i].style.top=snow[i].posy+'px';
}
movesnow();
}

function movesnow() {
for (var i=0;i<=snowmax;i++) {
  crds[i] += x_mv[i];
  snow[i].posy+=snow[i].sink;
  snow[i].style.left=(snow[i].posx+lftrght[i]*Math.sin(crds[i]))+'px';
  snow[i].style.top=snow[i].posy+'px';

  if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
  if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
  if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
  if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
  if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
  snow[i].posy=0;
  }
}
var d = new Date();
    if((d.getTime()-start) < duration) {
    var timer=setTimeout("movesnow()",50);
        }
else {
    clearTimeout(timer);
        clearSnow();
        }
}

function clearSnow() {
var spans=document.body.getElementsByTagName('span');
var snowElms=[];
for(var i=0; i<spans.length; i++) {
  if(/^s\d+/.test(spans[i].id)) {
        snowElms.push(spans[i]);
        }
    }
for(var i=0; i<snowElms.length; i++) {
    document.body.removeChild(snowElms[i]);
    }
}

for (var i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"<\/span>");
}
if (browserok) {
window.onload=initsnow;
}
</script>
Awesome :D

For a demo, visit http://www.hlxbans.net/
 

Vincent

Well-known member
#14
I can't do that ArnyVee, it's not my code - I just found it and latched onto it. :)
You can actually, just make sure you tell that the script is made by:
Code:
// CREDITS:
// Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com
// Permission given to use the script provided that this notice remains as is.
And if you don't trust that, than just create a topic there that says "Go to this link and copy the code, than paste it in header"
 

Brogan

XenForo moderator
Staff member
#15
I can't do that ArnyVee, it's not my code - I just found it and latched onto it. :)
As long as you link to the original source as to where to download the .js file then there's no reason why it can't be used for a template modification.
After all, the instructions to do so are more or less in this thread now.

The .js file can be re-used as long as the notice stays intact.
 

steven s

Well-known member
#17
I have used a falling snow script before, and while it's cute, it slows up page loading.
My members started complaining about it.

It's nice as long as it's not over done. Like using it all winter.
I liked Stairway to Heaven the first million times I heard it.
Now I change the station. (Same for The Beatles.)
 

anotheralias

Well-known member
#18
I have used a falling snow script before, and while it's cute, it slows up page loading.
Even one like this that doesn't use images? I've never noticed it slowing things down. The ones that moved graphics around really annoyed me, though - I know what you mean there.
 

Elizabeth

Well-known member
#19
I'm getting a code error when I copied and pasted into DW, it tells me there is a syntax error on this line...I've copied it three times.
Code:
function randommaker(range) { rand=Math.floor(range*Math.random()); return rand;