SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot purplefdu's Avatar
    Join Date
    Jul 2007
    Location
    Maine, US
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to Add Javascript Snow

    I use a Javascript to make snow appear to fall on my website and have tried to add it to my blog but can't get it to work. Where should I add it? The header, page template, elsewhere?
    Homeward Bound Puppy now with a store!

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    It depends where you want the snow to fall and how your blog tempates are set up. In other words, which platform are you using for your blog?
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I actually just did for a friend's site using a script I found online. Place it immediately after your <body> tag:

    <script>
    // 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=35

    // Set the colors for the snow. Add as many colors as you like
    var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

    // Set the fonts, that create the snowflakes. Add as many fonts as you like
    var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

    // 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 maximal-size of your snowflaxes
    var snowmaxsize=22

    // Set the minimal-size of your snowflaxes
    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.clientHeight
    marginright = document.body.clientWidth
    }
    else if (ns6) {
    marginbottom = window.innerHeight
    marginright = window.innerWidth
    }
    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
    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
    snow[i].style.top=snow[i].posy
    }
    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]);
    snow[i].style.top=snow[i].posy

    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 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>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    I saw a really nice scripted snow effect recently that uses alpha transparent png images, with a gif fallback.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •