What's new

Simple Snow HTML script

  • Thread starter harryz0r
  • Start date
  • Views 993
H

harryz0r

Enthusiast
Messages
79
Reaction score
10
so you've all seen a website where all around the site there is snowfall? I believe youtube did it a while back aha :tongue: Well here is a script for it..

http://www.mediafire.com/view/?ykx00ar8aga7d61
i don't think it needs a virus scan, its a .html :confused:

Source
Code:
<html>
  <head>
  <script type="text/javascript">
  var MaxSnow = 40
  var SnowColour = new Array("#aaaacc","#ddddFF","#ccccDD")
  var SnowFont = new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")
  var SnowLetter = "*"
  var SnowFallSpeed = 3
  var MaxSnowSize = 25
  var MinSnowSize = 8
  var getSnow = new Array()
  var WindowBottom
  var WindowRight
  var SnowTimer
  var SnowXMove = new Array();
  var SnowMove = new Array();
  var SnowMoveLR = new Array();
  var getBrowserInfo = navigator.userAgent
  var IE5 = document.all&&document.getElementById&&!getBrowserInfo.match(/Opera/)
  var NS6 = document.getElementById&&!document.all
  var Opera = getBrowserInfo.match(/Opera/)
  var BrowserTok = IE5||NS6||Opera
 
  function randommaker(range)
  {
  rand = Math.floor(range*Math.random())
  return rand
  }
 
  function initsnow()
  {
  if (IE5 || Opera)
  {
  WindowBottom = document.body.clientHeight
  WindowRight = document.body.clientWidth
  }
  else if (NS6)
  {
  WindowBottom = window.innerHeight
  WindowRight = window.innerWidth
  }
  var snowsizerange = MaxSnowSize-MinSnowSize
  for (i = 0;i <= MaxSnow;i++)
  {
  SnowMove[i] = 0;
  SnowMoveLR[i] = Math.random()*15;
  SnowXMove[i] = 0.03 + Math.random()/10;
  getSnow[i] = document.getElementById("s"+i)
  getSnow[i].style.fontFamily = SnowFont[randommaker(SnowFont.length)]
  getSnow[i].size = randommaker(snowsizerange)+MinSnowSize
  getSnow[i].style.fontSize = getSnow[i].size
  getSnow[i].style.color = SnowColour[randommaker(SnowColour.length)]
  getSnow[i].sink = SnowFallSpeed*getSnow[i].size/5
  getSnow[i].posx = randommaker(WindowRight-getSnow[i].size)
  getSnow[i].posy = randommaker(2*WindowBottom-WindowBottom-2*getSnow[i].size)
  getSnow[i].style.left = getSnow[i].posx
  getSnow[i].style.top = getSnow[i].posy
  }
  movesnow()
  }
 
  function movesnow()
  {
  for (i = 0;i <= MaxSnow;i++)
  {
  SnowMove[i] += SnowXMove[i];
  getSnow[i].posy += getSnow[i].sink
  getSnow[i].style.left = getSnow[i].posx+SnowMoveLR[i]*Math.sin(SnowMove[i]);
  getSnow[i].style.top = getSnow[i].posy
 
  if (getSnow[i].posy >= WindowBottom-2*getSnow[i].size || parseInt(getSnow[i].style.left)>(WindowRight-3*SnowMoveLR[i]))
  {
  getSnow[i].posx = randommaker(WindowRight-getSnow[i].size)
  getSnow[i].posy = 0
  }
  }
  var SnowTimer = setTimeout("movesnow()",50)
  }
 
  for (i = 0;i <= MaxSnow;i++)
  {
  document.write("<span id='s"+i+"' style='position:absolute; top:-"+MaxSnowSize+"'>"+SnowLetter+"</span>")
  }
  if (BrowserTok)
  {
  window.onload = initsnow
  }
  </script>
  </head>
  <body style='background: black'>
  </body>
 
</html>

only known bug = if you just open it up from your computer it will bug out and only display in the top left corner, but in a webpage it works perfect :biggrin:.

Peace,
-haz.
 
Last edited:
C

Cakes

お前はもう死んでいる
VIP
Retired
Messages
20,791
Reaction score
20,214
Thanks, i'm gonna do this on my tumblr xD
 
H

harryz0r

Enthusiast
Messages
79
Reaction score
10
Thanks, i'm gonna do this on my tumblr xD

aha, good luck with that :wink: i also forgot to add, if you just open it up from your computer it will bug out and only display in the top left corner, but in a webpage it works perfect :biggrin:
 
C

Cakes

お前はもう死んでいる
VIP
Retired
Messages
20,791
Reaction score
20,214
aha, good luck with that :wink: i also forgot to add, if you just open it up from your computer it will bug out and only display in the top left corner, but in a webpage it works perfect :biggrin:
Yeah, trying it out now :smile:, will edit with results.
 
I

Devove

In lulz we trust
Messages
1,261
Reaction score
360
I can't test this out, but I know many of these snow scripts don't allow you to click through the snow. Can one of you guys tell me if this one lets you click through? If not i'll post the script I use, I didn't make it. I found it somewhere on Google (not exactly sure where).
 
C

Cakes

お前はもう死んでいる
VIP
Retired
Messages
20,791
Reaction score
20,214
I can't test this out, but I know many of these snow scripts don't allow you to click through the snow. Can one of you guys tell me if this one lets you click through? If not i'll post the script I use, I didn't make it. I found it somewhere on Google (not exactly sure where).
aha, good luck with that :wink: i also forgot to add, if you just open it up from your computer it will bug out and only display in the top left corner, but in a webpage it works perfect :biggrin:
Put it on my tumblr, but it doesn't work :L

http://cakespls.tumblr.com
 
H

harryz0r

Enthusiast
Messages
79
Reaction score
10
I can't test this out, but I know many of these snow scripts don't allow you to click through the snow. Can one of you guys tell me if this one lets you click through? If not i'll post the script I use, I didn't make it. I found it somewhere on Google (not exactly sure where).

i don't believe you can click through the snow, but it's only small bits at once.. not like its covering your screen :tongue: But why not, the more the merrier
 
I

Devove

In lulz we trust
Messages
1,261
Reaction score
360
I'll post it when I get home. It's javascript and HTML, but you can just <script type within HTML if you don't like external files. I keep my stuff organized.
 
I

Devove

In lulz we trust
Messages
1,261
Reaction score
360
erm, i am sorry but i don't know.. i think it would need to be uploaded with your ftp :wink: + I Im a Leecher thanks dude

If its HTML you don't need to FTP, at least for Tumblr. They let you make a custom theme and you can put nearly any type of HTML into the custom theme, you can do a lot of stuff with tumblogs.
 
H

harryz0r

Enthusiast
Messages
79
Reaction score
10
If its HTML you don't need to FTP, at least for Tumblr. They let you make a custom theme and you can put nearly any type of HTML into the custom theme, you can do a lot of stuff with tumblogs.

oh sorry i didn't know, never used tumblr in my life :oops: if it doesn't work i'm not sure then, try it on a website or a forum and your good to go!
 
C

Cakes

お前はもう死んでいる
VIP
Retired
Messages
20,791
Reaction score
20,214
oh sorry i didn't know, never used tumblr in my life :oops: if it doesn't work i'm not sure then, try it on a website or a forum and your good to go!
Might have just been my theme, i did a lot of tweaking to it over the months.
 
H

harryz0r

Enthusiast
Messages
79
Reaction score
10
Might have just been my theme, i did a lot of tweaking to it over the months.

oh, well i wish i could help but i don't have a clue on how to use tumblr :rolleyes:
 
Z

Z61

Some times our saints are sinners
Retired
Messages
5,476
Reaction score
3,426
I'm like 67% sure Tumblr blocks outside javascript.
 
I

Devove

In lulz we trust
Messages
1,261
Reaction score
360
Here is mine...
snow.js
PHP:
//----------------------- CREATE SNOW EFFECT
 
 
  var snowsrc="event/img/snowflake.png"
  var no = 50;
  var hidesnowtime = 0;
  var snowdistance = "windowheight";
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
 
  function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  }
 
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 400;
 
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
 
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("sowebdesign.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) { 
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;        // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();    // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
 
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
 
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
       
 
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }

To put it on your page just put <script src="event/snow.js" type="text/javascript"></script>
You'll also need
http://anon.cu.cc/event/img/snow.png
http://anon.cu.cc/event/img/snowflake.png
 
H

harryz0r

Enthusiast
Messages
79
Reaction score
10
Here is mine...
snow.js
PHP:
//----------------------- CREATE SNOW EFFECT
 
 
  var snowsrc="event/img/snowflake.png"
  var no = 50;
  var hidesnowtime = 0;
  var snowdistance = "windowheight";
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
 
  function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  }
 
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 400;
 
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
 
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("sowebdesign.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;        // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();    // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
 
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
 
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
     
 
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }

To put it on your page just put <script src="event/snow.js" type="text/javascript"></script>
You'll also need
http://anon.cu.cc/event/img/snow.png
http://anon.cu.cc/event/img/snowflake.png

great man, i will try this one out aswell... good post :wink:.
 
Top Bottom