Tumblr Snow Effects Code, Get Falling Snowflakes !


There are a total of three Tumblr Snow Effects Code that display different types of falling snowflakes. Getting the snow effect in your Tumblr Theme HTML is actually very simple, you just need to paste some script code that we provide. If you notice that your browser starts getting slow, you might just want to delete and save it.

The Tumblr SnowEffect Script is only applied to your theme, this effect does not affect photos or pictures. For more Tumblr Codes follow the link.



Tumblr Falling Snow Effects Code I.

  1. First of All, head to this site to check the example.
  2. Go to Customize >> Appereance >> Edit HTML
  3. Look for the <head> tag and right before it, paste the following code:

  4. <script src="http://static.tumblr.com/p2evvtm/7Lzm07nfv/snowstorm.js"></script>
  5. If you want to customize the tumblr falling snow effect, You can add another script right after the one above, including only the parameters you want to change (e.g. amount of snow, speed, etc)

  6. <script>
    snowStorm.snowColor = '#11ccff'; // Snow Color
    snowStorm.flakesMaxActive = 96;  // Amount of Snowflakes Falling
    snowStorm.flakeBottom = null; // Snowflakes piling up on bottom of your screen?
    </script>


Tumblr Falling Snow Effects Code II.

With This Tumblr Falling Snow Code you will be able to change the snowflake shape!!.

  1. First of all, choose among these snowflakes the one that you want to see in your tumblr blog, the full url path can be found and copied below:

  2. http://static.tumblr.com/p2evvtm/70im07omb/snowflake-2.gif
    http://static.tumblr.com/p2evvtm/wsmm07on6/snowflake-1.gif
    http://static.tumblr.com/p2evvtm/vgOm07onj/snowflake-3.gif
  3. Add the following Snow Effect Code Script right after the <body> tag:

  4. <script type="text/javascript">
     
    /******************************************
    * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
    * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
    * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
    ******************************************/
     
      //Configure below to change URL path to the snow image
      var snowsrc="SNOWPIC"
      // 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)? "snow.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='"+snowsrc+"' 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='"+snowsrc+"' 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>
  5. Now, look for snowsrc=”SNOWPIC”, and replace SNOWPIC with the full url path of the snowflake icon you chose.
  6. Update Preview, save and close.


Tumblr Falling Snow Code

7 Responses to "Tumblr Snow Effects Code, Get Falling Snowflakes !"

Add Comment
  1. ola

    June 11, 2012 at 7:44 pm

    Tumblr Falling Snow Effects Code II.: so can you actually pic the work “SNOWPIC” in for ease of use. i cant seem to find where i need to substitute the snow URL.

    [Reply]

  2. Brianna

    December 1, 2012 at 2:45 am

    How do you edit on the first type of show? where do you type in the changes in the second code?

    [Reply]

  3. Tyler

    December 8, 2012 at 8:44 pm

    Can you replace the snow image with another one? So like, falling stars?

    [Reply]

  4. Lily

    December 8, 2012 at 9:36 pm

    This is a really silly question, but I’m extremely inexperienced with Tumblr coding. I do want to have the snow pile up, so what I put put in place of ‘null’?

    [Reply]

  5. pastlight

    December 13, 2012 at 11:29 pm

    what code should we use if we don’t want the flakes to pill up at the bottom of the screen?
    rwhere it says ” = null ;”

    [Reply]

  6. Louise

    January 20, 2013 at 8:01 pm

    I want it to snow only on left side of my screen, how can I configurate that?

    [Reply]

  7. Em

    February 22, 2013 at 3:08 pm

    I want to make it snow with different images, but if I put the code in more than once all the images freeze up. How do I fix that?

    [Reply]

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>