1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Add-on Snow effect for winter

Discussion in 'Resource and Add-on Requests' started by Puntocom, Dec 1, 2010.

  1. Puntocom

    Puntocom Well-Known Member

    A snow effect or graphic for our forums would be nice :)
     
  2. Miko

    Miko Well-Known Member

    it's snowing :)
     
  3. anotheralias

    anotheralias Well-Known Member

    Here's one that doesn't even use images. Just stick it above everything else in the logo template, (or scroll down for Brogan's instructions on calling it as a .js file) 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>
    
     
    Vincent and ArnyVee like this.
  4. ArnyVee

    ArnyVee Well-Known Member

    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? :D
     
  5. anotheralias

    anotheralias Well-Known Member

    I'm sure it can be done, but if I knew how to do that, I'd be doing it too. :D
     
  6. ArnyVee

    ArnyVee Well-Known Member

    Maybe we can both learn soon enough from some help here on xF ;)
     
  7. anotheralias

    anotheralias Well-Known Member

    It's the kind of thing I could probably figure out by searching help forums, but I've never been motivated enough to do it. I just put a lot of space between the script and everything else.

    And I will add - unlike those scripts that do require images, this one doesn't make the scroll bar move around in IE and nobody has ever had a problem with it so far.

    Also, change the font to a . and the snow to various colors for confetti.
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    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.

    You just need to change the file name/path to suit.
     
    Alien, Floris and anotheralias like this.
  9. anotheralias

    anotheralias Well-Known Member

    Thanks Brogan! How do you create a .js file, just paste the text on Notepad and save it as a .js?
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Exactly :)
     
    ArnyVee and anotheralias like this.
  11. ArnyVee

    ArnyVee Well-Known Member

    anotheralias,

    Once you get it working you should release it as a 'template modification' here at xF for all to use :)

    I've used this same type of script and then changed it to falling leaves during Autumn and falling hearts during Valentine's Day, etc. :D
     
  12. Vincent

    Vincent Well-Known Member

    Awesome :D

    For a demo, visit http://www.hlxbans.net/
     
  13. anotheralias

    anotheralias Well-Known Member

    I can't do that ArnyVee, it's not my code - I just found it and latched onto it. :)
     
  14. Vincent

    Vincent Well-Known Member

    You can actually, just make sure you tell that the script is made by:
    Code:
    // 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.
    And if you don't trust that, than just create a topic there that says "Go to this link and copy the code, than paste it in header"
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    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.
    After all, the instructions to do so are more or less in this thread now.

    The .js file can be re-used as long as the notice stays intact.
     
    Vincent and anotheralias like this.
  16. anotheralias

    anotheralias Well-Known Member

    Cool. Okay, I'll do that Brogan. :) And I might as well do it right and include several variation, like confetti and blizzard and so on.
     
  17. steven s

    steven s Well-Known Member

    I have used a falling snow script before, and while it's cute, it slows up page loading.
    My members started complaining about it.

    It's nice as long as it's not over done. Like using it all winter.
    I liked Stairway to Heaven the first million times I heard it.
    Now I change the station. (Same for The Beatles.)
     
  18. anotheralias

    anotheralias Well-Known Member

    Even one like this that doesn't use images? I've never noticed it slowing things down. The ones that moved graphics around really annoyed me, though - I know what you mean there.
     
  19. Elizabeth

    Elizabeth Well-Known Member

    I'm getting a code error when I copied and pasted into DW, it tells me there is a syntax error on this line...I've copied it three times.
    Code:
    function randommaker(range) { rand=Math.floor(range*Math.random()); return rand; 
     
  20. Kier

    Kier XenForo Developer Staff Member

    You're missing a trailing }

    Code:
    function randommaker(range) { rand=Math.floor(range*Math.random()); return rand; }
     
    anotheralias and Elizabeth like this.

Share This Page