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.
- First of All, head to this site to check the example.
- Go to Customize >> Appereance >> Edit HTML
- Look for the <head> tag and right before it, paste the following code:
- 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)
<script src="http://static.tumblr.com/p2evvtm/7Lzm07nfv/snowstorm.js"></script> |
<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!!.
- 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:
- Add the following Snow Effect Code Script right after the <body> tag:
- Now, look for snowsrc=”SNOWPIC”, and replace SNOWPIC with the full url path of the snowflake icon you chose.
- Update Preview, save and close.
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 |
<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>
|
One Response to "Tumblr Snow Effects Code, Get Falling Snowflakes !"
Add Comment