How to create snowfall for Blogspot to celebrate Christmas

Christmas is also coming, Christmas atmosphere is also filling the streets of big cities. And also many websites, have changed to create a Christmas atmosphere that blends with life. Whether that change is as big as completely changing the web interface, or just as small and simple as creating snow.

How to create snowfall for Blogspot to celebrate Christmas
How to create snowfall for Blogspot to celebrate Christmas


Therefore, it is also advisable to celebrate Christmas, but on a smaller level, just create snow on your own Blogspot. Therefore, today I will show you how to create snowfall for my blog to welcome the upcoming Christmas season. Follow along:

How to create snowfall for Blogspot

Google Tech News will offer many different snowfall formats for you to choose from. Choose which one you like.

Snow effect 1

This snowfall effect is quite simple, just small, non-angled snowflakes that look like white dots.

  • Add the following js code inside the <head> tag:

<script src=’http://static.tumblr.com/2w7y46r/xtmlvfnoc/snowstorm.js’/>

And save it, just like that, you already have snow on your web.

  • In addition, if you want to customize more, you can add the small code below after it and customize it as you like:

<script type="text/javascript">

snowStorm.snowColor = '#fff'; // Color of falling snow

snowStorm.flakesMaxActive = 96; // Maximum amount of snow on screen

snowStorm.snowStick = true; // If set to false, no snow will be deposited at the bottom of the page

</script>

Snow effect 2

This is the effect that creates star-shaped snow, small snow, falling quite slowly and not densely.

  • Add this code inside the <body> tag:

<SCRIPT type="text/javascript">

//<![CDATA[

// Number of snowflakes (Not recommended more than 30-40)

var snowmax=35

// Color options for snow, can be different colors as below

var snowcolor=new Array(“#aaaacc”,”#ddddff”,”#ccccdd”,”#f3f3f3″,”#f0ffff”)

// Set the font to make snow, because different fonts the shape of the * sign is also different

var snowtype=new Array(“Times”,”Arial”,”Times”,”Verdana”)

// Set the character that generates snow (Recommended: *)

var snowletter="*"

// Set falling speed (Recommended range 0.3-2)

var sinkspeed=0.6

// Maximum size of snowflake

var snowmaxsize=30

// Minimum size of snowflake

var snowminsize=8

// Set the snowfall area

// 1 for the whole site, 2 for the left part

// 3 for the center part, 4 for the right part

var snowingzone=1

////////////////////////////////////////////////// ////////////////////////

// OK

////////////////////////////////////////////////// ////////////////////////

// Do not edit the code below

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>

The parameters you can adjust to your liking based on the comments I wrote in the code above.

Snow effect 3

This is a fast, dense and very loud snowfall effect. It is possible to set the effect to automatically turn off after a specified time. And can optionally configure the shape of snowflakes when falling.

  • Add the following code to the <body> tag:

<SCRIPT type="text/javascript" language="JavaScript1.2">

//<![CDATA[

//Pre-loads your image/s below

//Change the snow image path if you want a different image

grphcs=new Array(6)

Image0=new Image();

Image0.src=grphcs[0]="http://rainbow.arch.scriptmania.com/scripts/bg/snow1.gif";

Image1=new Image();

Image1.src=grphcs[1]="http://rainbow.arch.scriptmania.com/scripts/bg/snow2.gif"

Image2=new Image();

Image2.src=grphcs[2]="http://rainbow.arch.scriptmania.com/scripts/bg/snow3.gif"

Image3=new Image();

Image3.src=grphcs[3]="http://rainbow.arch.scriptmania.com/scripts/bg/snow4.gif"

Image4=new Image();

Image4.src=grphcs[4]="http://rainbow.arch.scriptmania.com/scripts/bg/snow5.gif"

Image5=new Image();

Image5.src=grphcs[5]="http://rainbow.arch.scriptmania.com/scripts/bg/snow6.gif"

//Smoothness depends on image file size,

//the smaller the size the more you can use!

// Configure below - change number of snow to render

Amount=40;

Ypos=new Array();

Xpos=new Array();

Speed=new Array();

Step=new Array();

Cstep=new Array();

ns=(document.layers)?1:0;

ns6=(document.getElementById&&!document.all)?1:0;

var Stop = false;

if (ns){

for (i = 0; i < Amount; i++){

var P=Math.floor(Math.random()*grphcs.length);

rndPic=grphcs[P];

document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");

}

}

else{

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i = 0; i < Amount; i++){

var P=Math.floor(Math.random()*grphcs.length);

rndPic=grphcs[P];

document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');

}

document.write('</div></div>');

}

WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;

WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;

for (i=0; i < Amount; i++){

Ypos[i] = Math.round(Math.random()*WinHeight);

Xpos[i] = Math.round(Math.random()*WinWidth);

Speed[i]= Math.random()*5+3;

Cstep[i]=0;

Step[i]=Math.random()*0.1+0.05;

}

function fall(){

if (Stop) { clearSnow(); return; }

var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;

var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;

var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;

var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;

for (i=0; i < Amount; i++){

sy = Speed[i]*Math.sin(90*Math.PI/180);

sx = Speed[i]*Math.cos(Cstep[i]);

Ypos[i]+=sy;

Xpos[i]+=sx;

if (Ypos[i] > WinHeight){

Ypos[i]=-60;

Xpos[i]=Math.round(Math.random()*WinWidth);

Speed[i]=Math.random()*5+3;

}

if (ns){

document.layers['sn'+i].left=Xpos[i];

document.layers['sn'+i].top=Ypos[i]+hscrll;

}

else if (ns6){

document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);

document.getElementById("si"+i).style.top=Ypos[i]+hscrll;

}

else{

eval("document.all.si"+i).style.left=Xpos[i];

eval("document.all.si"+i).style.top=Ypos[i]+hscrll;

}

Cstep[i]+=Step[i];

}

setTimeout('fall()',20);

}

window.onload=fall;

// ***** Delay FUNCTION HERE *****

setTimeout("Stop=true", 20000); // ***** Delay 1000 = 1 second *****

function clearSnow(){

for (i=0; i < Amount; i++){

if (ns){

document.layers['sn'+i].display='none';

}

else if (ns6){

document.getElementById("si"+i).style.display='none';

}

else{

eval("document.all.si"+i).style.display='none';

}

}

}

//-->

//]]>

</SCRIPT>

You can optionally customize the image of the snowflake, by replacing another image in the place of your snowflake images above. And you can set the time to turn off the effect by changing the number 20000, this 20000 is 20s.

With just one of 3 ways to create snow for this Blogspot, you have decorated your website with a little Christmas atmosphere. Let's decorate your blog a little to welcome Christmas.

Google Tech News

Post a Comment

Previous Post Next Post