Snowmaker Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Snowmaker Javascript

    Make snow fall on your webpage this Christmas!

    Here is a great falling snow javascript that doesn't need images uploaded to your server. It uses font types to make the snowflake images which makes it easier for users to install to their websites.

    It is a one step script which you place into your webpage straight after the <body> tag.

    Configure the variables at the top of the script to set the number of snowflakes, the colors, fonts and speed. Nothing else needs configuring.

    STEP 1:

    Copy and paste the falling snow javascript below after the <body> tag of your html.



    <div class='quotetop'>QUOTE </div>
    <script>
    // CREDITS: // Snowmaker Copyright © 2003 Peter Gehrig. All rights reserved.
    // Distributed by http://www.hypergurl.com // Permission given to use the script
    on webpages 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=3 ///////////////////////////////////////////////////////////////////////////
    // 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&&!browse rinfos.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(2*marginbottom-marginbottom-2*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-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(""+snowletter+"")
    } if (browserok) { window.onload=initsnow } </script>[/b]
    <div align="center">My Web Community ......... http://pahasara.net



    </div>
    Tags: None
    #2
    above code dont work for me
    so i found another same script !!
    Code:
    <script type="text/javascript">


// 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("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 maximum-size of your snowflakes
var snowmaxsize=22

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

  /*
   //   * NO CONFIGURATION BELOW 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(2*marginbottom-marginbottom-2*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-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(""+snowletter+"")
}
if (browserok) {
    window.onload=initsnow
}
</SCRIPT>
    sigpic

    Comment

      #3
      Were abouts do i put this. Do i put it under the <body> or at the side of it.

      Comment

        #4
        Its not for wap page, only for web
        Advertise your mobile site for FREE with AdTwirl

        Comment

          #5
          change the *

          // Set the letter that creates your snowflake (recommended: * )
          var snowletter="*"

          to

          // Set the letter that creates your snowflake (recommended: * )
          var snowletter="Merry Xmas"

          Visit: Chat4u.mobi - The New Lay Of being a site of your dreams!
          Visit: WapMasterz Coming Back Soon!
          _______
          SCRIPTS FOR SALE BY SUBZERO
          Chat4u Script : coding-talk.com/f28/chat4u-mobi-script-only-150-a-17677/ - > Best Script for your site no other can be hacked by sql or uploaders.
          FileShare Script : coding-talk.com/f28/file-wap-share-6596/ -> Uploader you will never regret buying yeah it mite be old now but it still seems to own others...
          _______
          Info & Tips
          php.net
          w3schools.com

          Comment

            #6
            Does this work for lava

            Comment

              #7
              this script work for the html lava version
              Code:
              <script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. ([url]http://www.altan.hr/snow/index.html[/url])
* Visit Dynamic Drive DHTML code library ([url]http://www.dynamicdrive.com/[/url]) for full source code
* Last updated Nov 9th, 05&#39; by DD. This notice must stay intact for use
* Slightly Modified for phpBB3 use by ModphpBB3 ([url]http://www.modphpbb3.com/[/url])
******************************************/
  
  //Configure below to change URL path to the snow image
  var snowsrc="snow2.gif"
  // 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.indexOf("dynamicdrive.com")!=-1)? "snow2.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // 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;\"><a href=\"http://dynamicdrive.com\"><img src=&#39;"+snowsrc+"&#39; 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=&#39;"+snowsrc+"&#39; 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]-30);
        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)
        }

</script>
              upload this file as js, upload pictures snowflakes in gif format,and include this in the index page
              see where the forum for this script LOOK

              change the picture snowflakes what you want
              sigpichttp://happy.srecnica.com/web

              Comment

                #8
                ive put this in index and im just getting a blank screen

                Comment

                  #9



                  include index put on the start page
                  Code:
                  include "snow.js";
                  sigpichttp://happy.srecnica.com/web

                  Comment

                    #10
                    so where is the snow2.gif?
                    Nice Effects

                    Comment

                    Previous template Next
                    Working...
                    X