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--->
     
    randomchance likes this.
  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.
  6. Grizzly Adam

    Grizzly Adam Active Member

    I used the snowstorm js script, edited it down some to try to make it faster on slower devices. I then added a Show snow checkbox in preferences. Finally, I placed the script in a rotating ad and set it only show for those who have checked the box. The rotating ads addon is really good for presenting things to target audiences using the fields they have set (and custom fields you have set). I use it mainly to show holiday banners to only the countries that celebrate the holiday.

    Screenshot from 2016-12-20 21-54-21.png
    Screenshot from 2016-12-20 21-59-19.png
    Screenshot from 2016-12-20 22-10-31.png
    Screenshot from 2016-12-20 21-54-55.png
     
    Last edited: Dec 21, 2016

Share This Page