Classic Style Snow Fall

[OldSchoolDSL]

This will give your site a classic holiday snow fall without any images, uploading any files, or adding any server load to your site.

It is also customize-able to fit your needs. :)


Classic Snow Fall

In your footer at the very end and below any other scripts you may already have there.

Add the following


<SCRIPT type="text/javascript">
/*
Classic Snow Fall - Java Script
*/

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

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")

// 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.6

// Set the maximum-size of your snowflakes
var snowmaxsize=30

// Set the minimal-size of your snowflakes
var snowminsize=8

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

///////////////////////////////////////////////////////////////////////////
// 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() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth-15
}
else if (ns6) {
marginbottom = document.body.scrollHeight
marginright = window.innerWidth-15
}
var snowsizerange=snowmaxsize-snowminsize
for (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+'px';
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].style.zIndex=1000
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(2*marginbottom-marginbottom-2*snow[i].size)
snow[i].style.left=snow[i].posx+'px';
snow[i].style.top=snow[i].posy+'px';
}
movesnow()
}

function movesnow() {
for (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-2*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 timer=setTimeout("movesnow()",50)
}

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

</SCRIPT>


Save and reload
In another browser tab or windows, review the results.
If all is well as it should be, you're done.

Please mark as installed :o

UPDATE 12-23-2011

Not a code update, but an optimized suggestion. As I know many of you will start using this on Christmas Eve.

Suggestion:

If you know your community has a lot of mobile web users, such as Apple iPod, setting the snow fall value count to 20 works best. (original value is 35).


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


Happy Holidays :)


If you're tired of vBulletin you should upgrade to Woltlab Burning Board http://woltlab.com

[3amalah]

http://www.llssll.com/vb/index.php?styleid=91

:)

[Max Taxable]

CPU intensive on your visitors and users though. But will use it on Christmas Day anyway, THANKS!

[OldSchoolDSL]

http://www.llssll.com/vb/index.php?styleid=91

:)

I'm glad you like it, please click installed :)

[OldSchoolDSL]

CPU intensive on your visitors and users though. But will use it on Christmas Day anyway, THANKS!

No more so than any other java script.

The only higher than average load I got on this was if you're using a much older browser... ie .... Internet Explorer 6 (which is discontinued by Microsoft and vBulletin is also stopping support for).

Enjoy using this on Christmas :)

[Max Taxable]

No more so than any other java script.

The only higher than average load I got on this was if you're using a much older browser... ie .... Internet Explorer 6 (which is discontinued by Microsoft and vBulletin is also stopping support for).

Enjoy using this on Christmas :)On my FF 9 it increases CPU load quite a bit, and a couple of my staff coders noticed it too. It appears to be worse on IE9 though then it does on safari or FF.

I personally don't know of any humans still using IE6 Hahaha!

But like I said, it's not a permanent thing. Just a Christmas Day surprise and I appreciate it.

[Excilium]

I'm afraid all the ones I've installed have increased CPU usage, I don't think I'll be using this one either, thanks for the share at least!

[OldSchoolDSL]

I'm afraid all the ones I've installed have increased CPU usage, I don't think I'll be using this one either, thanks for the share at least!

Set the snow foll down to 20 and it loads fine on even an iPod ;)

[j-bo]

Excellent. Just tested it and will be putting it into use on Christmas Eve.

[TheInformer]

Just installed this on our4.1.9 site and is working a treat, not noticed any major resource difference either

[OldSchoolDSL]

Not a code update, but an optimized suggestion. As I know many of you will start using this on Christmas Eve.

Suggestion:

If you know your community has a lot of mobile web users, such as Apple iPod, setting the snow fall value count to 20 works best. (original value is 35).


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


Happy Holidays :)

[CharLzarD]

Thanks a lot. Perfect for this time of year!

[Max Taxable]

If you know your community has a lot of mobile web users, such as Apple iPod, setting the snow fall value count to 20 works best. (original value is 35).All of my mobile users have a dedicated style they're automatically assigned to... They don't get to see the mean ol' snowflakes!

[OldSchoolDSL]

vBulletin 3 Patch Level 3 was seemingly the last version of vBulletin 3.

This work on it and all modern web browsers including Internet Explorer 10

If you have a lot of mobile web users, see notes added from last year above :)

[OldSchoolDSL]

Confirmed still working :)

Yes, even on modern browsers

[Nimchan]

Looks awesome! Thanks you =)

[OldSchoolDSL]

No longer supported as I no longer use vBulletin having moved to both WoltLab Burning Board and Invision Power Board.

I give 100% permission to reuse, modify, improve, enhance, and redistribute this code as freeware to anyone, everyone, and everywhere.

Good luck :)