What's new

Simple Snow HTML script

  • Thread starter harryz0r
  • Start date
  • Views 1,268
harryz0r

harryz0r

Enthusiast
Messages
79
Reaction score
10
Points
55
Sin$
7
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:
Cakes

Cakes

お前はもう死んでいる
VIP
Retired
Mythical Veteran Platinum Record End of the Year 2017
Messages
20,705
Reaction score
20,272
Points
3,870
Sin$
-7
Thanks, i'm gonna do this on my tumblr xD
 
harryz0r

harryz0r

Enthusiast
Messages
79
Reaction score
10
Points
55
Sin$
7
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:
 
Cakes

Cakes

お前はもう死んでいる
VIP
Retired
Mythical Veteran Platinum Record End of the Year 2017
Messages
20,705
Reaction score
20,272
Points
3,870
Sin$
-7
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.
 
Im a Leecher

Devove

In lulz we trust
Seasoned Veteran Grizzled Veteran
Messages
1,261
Reaction score
360
Points
235
Sin$
0
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).
 
Cakes

Cakes

お前はもう死んでいる
VIP
Retired
Mythical Veteran Platinum Record End of the Year 2017
Messages
20,705
Reaction score
20,272
Points
3,870
Sin$
-7
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
 
harryz0r

harryz0r

Enthusiast
Messages
79
Reaction score
10
Points
55
Sin$
7
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
 
Im a Leecher

Devove

In lulz we trust
Seasoned Veteran Grizzled Veteran
Messages
1,261
Reaction score
360
Points
235
Sin$
0
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.
 
Im a Leecher

Devove

In lulz we trust
Seasoned Veteran Grizzled Veteran
Messages
1,261
Reaction score
360
Points
235
Sin$
0
erm, i am sorry but i don't know.. i think it would need to be uploaded with your ftp :wink: + Im a Leecher 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.
 
harryz0r

harryz0r

Enthusiast
Messages
79
Reaction score
10
Points
55
Sin$
7
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!
 
Cakes

Cakes

お前はもう死んでいる
VIP
Retired
Mythical Veteran Platinum Record End of the Year 2017
Messages
20,705
Reaction score
20,272
Points
3,870
Sin$
-7
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.
 
Z61

Z61

Some times our saints are sinners
Retired
Programmer Forum Addict Odysseus' Summit
Messages
5,468
Reaction score
3,429
Points
1,042
Sin$
0
I'm like 67% sure Tumblr blocks outside javascript.
 
Im a Leecher

Devove

In lulz we trust
Seasoned Veteran Grizzled Veteran
Messages
1,261
Reaction score
360
Points
235
Sin$
0
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
 
harryz0r

harryz0r

Enthusiast
Messages
79
Reaction score
10
Points
55
Sin$
7
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
Login
Register