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

XF 1.5 Snow effect on background possible?

Discussion in 'Styling and Customization Questions' started by borgqueenx, Dec 7, 2015.

  1. borgqueenx

    borgqueenx Active Member

    I would really love to have snow on the background of my website during christmas. is this possible?
     
  2. OUTL4W

    OUTL4W Active Member

    copy & paste to the end of footer template:
    Code:
    <!---snow effect --->
    <SCRIPT type="text/javascript">
    /*
    Classic Snow Fall - Java Script
    */
    
    // Set the number of snowflakes (more than 30 - 40 not recommended)
    var snowmax=35
    
    // Set the colors for the snow. Add as many colors as you like
    var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
    
    // Set the fonts, that create the snowflakes. Add as many fonts as you like
    var snowtype=new Array("Times","Arial","Times","Verdana")
    
    // 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.6
    
    // Set the maximum-size of your snowflakes
    var snowmaxsize=30
    
    // Set the minimal-size of your snowflakes
    var snowminsize=8
    
    // 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
    
    ///////////////////////////////////////////////////////////////////////////
    // 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() {
            if (ie5 || opera) {
                    marginbottom = document.body.scrollHeight
                    marginright = document.body.clientWidth-15
            }
            else if (ns6) {
                    marginbottom = document.body.scrollHeight
                    marginright = window.innerWidth-15
            }
            var snowsizerange=snowmaxsize-snowminsize
            for (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+'px';
                    snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                    snow[i].style.zIndex=1000
                    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(2*marginbottom-marginbottom-2*snow[i].size)
                    snow[i].style.left=snow[i].posx+'px';
                    snow[i].style.top=snow[i].posy+'px';
            }
            movesnow()
    }
    
    function movesnow() {
            for (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-2*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 timer=setTimeout("movesnow()",50)
    }
    
    for (i=0;i<=snowmax;i++) {
            document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
    }
    if (browserok) {
            window.onload=initsnow
    }
    
    </SCRIPT>
    <!---end snow effect--->
     
  3. borgqueenx

    borgqueenx Active Member

    thanks alot! Ready for christmas! :)
     
  4. derpyhooves

    derpyhooves Active Member

    Necro'ing this thread because it's that time of year again.

    A simple, lightweight and versatile implementation for all of us getting ready to build a winter theme.

    Thank you for this.
     
  5. Jim Kingsnorth

    Jim Kingsnorth Active Member

    Steve F likes this.

Share This Page