Forum Home Enhancements - Snow for your site :-)

Hi Everyone

Just found this great script on this site which lets you add a snow effect to your forums, its great to add on Christmas Day. The great thing about this script is that its free and you don't have to keep it just for snowing, you could add leaves, pumpkins (Halloween) for just about any graphic you want, credit goes to Sasa Skevin for creating such a good script.

You can see a DEMO HERE on the Dynamicdrive homepage, its a great site with loads of scripts you could integrate within your forums.

Enjoy,

UKBusinessLive

-----

I have moved and edited this script for easy use by the members. I have added instructions and added the script to a file which is loaded.

This code is a free source from DynamicDrive.com. Users are NOT allowed to remove the copyrights.

Thanks,

-Roms


***********Update*****************

Just added a Valentine 10 x Hearts Collection, so you can use this as a treat on Valentines day

Enjoy

[yotsume]

I updated this script to allow for random multiple images to fall on page reload or refresh!

HAPPY HOLIDAYS EVERYONE!

[yotsume]

Randoam Images On Page Reload or Refresh!

Ok with a little help from a coder over at www.dynamicdrive.com I have made a serious improvement to this mod.

You can now have random multiple images fall on every page refresh. Meaning each time the page is refreshed of changed a different image will fall! The images can even be animated gifs to create a serious effect for your site.

Here is the new code for you all! Just change the path and list for the images highlighted in Red.

Here is a live demo: Live Example

HAPPY HOLIDAYS!

/******************************************
* Original Snow Effect Script- By Altan
* Random Falling Images Script
* Dynamic Drive DHTML Code Library (http://www.dynamicdrive.com/)
* Last updated Dec 2010, by Yotsume. This notice must stay intact for use
******************************************/

  //Configure below to change URL paths to your falling images
  var imgs=[
   '/images/misc/present.gif',
   '/images/misc/reindeer.gif',
   '/images/misc/santa.gif',
   '/images/misc/santa2.gif',
   '/images/misc/snowman.gif',
   '/images/misc/bells.gif',
   '/images/misc/snowflake.gif'
  ]

  var snowsrc=imgs[Math.floor(Math.random()*imgs.length)];
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  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 = 600;

  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
  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-100);  // 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;\"><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]-100);
        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)
        }

[yotsume]

Here is my transparent animated Santa, and a flying dove. They are both made to be transparent so will match any site perfectly.

[yotsume]

Here is a transparent animated bells gif.

[yotsume]

Here is another transparent animated Santa.

[yotsume]

and here is a transparent animated gift that spins!

[illkeyone]

Is it possible to make it falling "multiple images" at the same time?

Like, 3 of the images are "Snow.gif", 2 of them are "Gift.gif", another 3 are some other images... just random, but not the same image at a time, at the same page...

Is it possible?

( Because I want 3-4 and maybe more or less different "New Year" celebration images to show up at the pages, instead of 1 )

[Digital Jedi]

Originally Posted by illkeyone

Is it possible to make it falling "multiple images" at the same time?

Like, 3 of the images are "Snow.gif", 2 of them are "Gift.gif", another 3 are some other images... just random, but not the same image at a time, at the same page...

Is it possible?

( Because I want 3-4 and maybe more or less different "New Year" celebration images to show up at the pages, instead of 1 )

With this particular script, no.

[SoniaTel]

Great

thank u