<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>
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?
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.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?
ExactlyThanks Brogan! How do you create a .js file, just paste the text on Notepad and save it as a .js?
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>
I can't do that ArnyVee, it's not my code - I just found it and latched onto it.
// 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.
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.I can't do that ArnyVee, it's not my code - I just found it and latched onto it.
I have used a falling snow script before, and while it's cute, it slows up page loading.
We use essential cookies to make this site work, and optional cookies to enhance your experience.