[TUT] Snow Effect

XF1 [TUT] Snow Effect

1.0, 1.1, 1.2, 1.3, 1.4, 1.5
Guide to make your forum with falling Snow flakes

Step 01 : Create a custom .js file
Open Notepad++ and paste the codes below and save as .js file (Eg. Snow.js)

Code:
// CREDITS:

// Snowmaker copybyte (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 = 0;
lftrght = Math.random()*15;
x_mv = 0.03 + Math.random()/10;
snow=document.getElementById("s"+i);
snow.style.fontFamily=snowtype[randommaker(snowtype.length)];
snow.size=randommaker(snowsizerange)+snowminsize;
snow.style.fontSize=snow.size;
snow.style.color=snowcolor[randommaker(snowcolor.length)];
snow.sink=sinkspeed*snow.size/5;
if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
snow.posy=randommaker(6*marginbottom-marginbottom-6*snow.size);
snow.style.left=snow.posx+'px';
snow.style.top=snow.posy+'px';
}
movesnow();
}

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

if (snow.posy>=marginbottom-6*snow.size || parseInt(snow.style.left)>(marginright-3*lftrght)){
if (snowingzone==1) {snow.posx=randommaker(marginright-snow.size)}
if (snowingzone==2) {snow.posx=randommaker(marginright/2-snow.size)}
if (snowingzone==3) {snow.posx=randommaker(marginright/2-snow.size)+marginright/4}
if (snowingzone==4) {snow.posx=randommaker(marginright/2-snow.size)+marginright/2}
snow.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.id)) {
snowElms.push(spans);
}
}
for(var i=0; i<snowElms.length; i++) {
document.body.removeChild(snowElms);
}
}

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;
}

Step 02 : Copy it to public_html/js/xenforo or in any directory

Step 03 : Go to template page_container_js_body and include the function below

Code:
<xen:require js="js/xenforo/snow.js" />
Change the directory in the above function if you copied in somewhere else.
Author
shimmer
Views
461
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from shimmer

Top