JavaScript is used to add different types of text effects and many more. In this article you will learn to add continuous snowfall on a webpage. Lets add a snowfall effect following the steps given below. You may also add any other letter instead of snow. Suppose you want to add F, then the letter F will fall randomly on the website in different sizes and in different colors.
Step 01 Create a simple webpage first
Step 01 Create a simple webpage first
You have to create a simple webpage first to test the snowfall. But if you already have a website then you can apply the snowfall there. To create a webpage, press Windows Key + R buttons together. Then the RUN Command Box will open. Now type notepad into the RUN Command Box and press the Enter Key. A new notepad document will open, now type the codes into the notepad document.
<html>
<head> <title>Snowfall</title> </head> <body bgcolor="#1E5B82"> Your content here </body> </html> |
|---|
Step 02 Paste the codes before the </head> tag
Now you have to add the following JavaScript codes to your webpage. So copy the codes from the box below and paste them before the closing head tag </head>.
<SCRIPT type="text/javascript">
var snowmax=35 var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff") var snowtype=new Array("Times","Arial","Times","Verdana") var snowletter="*" var sinkspeed=0.6 var snowmaxsize=30 var snowminsize=8 var snowingzone=1 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> |
|---|
Step 03 Save the document as an html file
Now save the document as an html file. To do so, click on File from the menu and go to Save As... Then a pop-up window will open. Now provide a name with .htm or .html extension into the text input box. For example: idhali.htm or idhali.html Finally click on the Save button to save the document as a webpage.
Make some changes if you want
Make some changes if you want
Look at the codes above in the box. There are some text in red color. You may change them to make some changes in the snowfall.
First of all you may change the in the second line var snowmax=35. 35 is here the number of snowflakes and you may change the number from 30 to 40. 30-40 is the recommended number of the snowflakes.
You may also change the color of the snowflakes changing the color of the following line. This is the third line of the above codes.
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
Change the fonts replacing the fonts name of fourth line of the above codes. You may also add more fonts if you want.
var snowtype=new Array("Times","Arial","Times","Verdana")
First of all you may change the in the second line var snowmax=35. 35 is here the number of snowflakes and you may change the number from 30 to 40. 30-40 is the recommended number of the snowflakes.
You may also change the color of the snowflakes changing the color of the following line. This is the third line of the above codes.
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")
Change the fonts replacing the fonts name of fourth line of the above codes. You may also add more fonts if you want.
var snowtype=new Array("Times","Arial","Times","Verdana")
No comments:
Post a Comment