Introduction:-
In my previous
article i have explained scrolling of a page using jquery. Now a days a
dot net developer can do whatever they wants by coding.In this article i have
created a animated page using javascript,After writing all these code you can
get a similar looks of snow falls in your web page.
Description:-
Now i am going to describe the process.First create one .aspx page and inside that page ,give script tag i,e:<script type="text/javascript"> and inside that script tag write your jvascript functions.
I am
randomly created that points which exactly looks like snow falls.It will be
better for me to explain you with a example.so i am going to give a overlook on
my .aspx page, where i have explained all the functionality.Now you have
to write the code like shown below.
Here I have provided
some code in javascript where you can see the snow falls
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DotNetOcean</title>
</head>
<body style="background-color:Black;">
<form id="form1" runat="server"
>
<div style="background:red;height:700px;">
Om Namah
Shivaya <br />
<br /> <br /> <br /> <br /> <br /> Shibashish Mohanty
</div>
</form>
<script type="text/javascript">
//You can Set number of snowflakes (more than 30 - 40
is not recommended)
var snowmax = 35
//you can Set the colors for the snow.
var snowcolor = new
Array("#aaaacc", "#ddddff", "#ccccdd",
"#f3f3f3", "#f0ffff")
//You can Set the fonts, that create the
snowflakes.
var snowtype = new
Array("Times", "Arial", "Times",
"Verdana")
//You can Set the letter that creates your
snowflake (recommended: * )
var snowletter = "*"
//You can Set the speed of sinking (recommended
values range from 0.3 to 2)
var sinkspeed = 0.6
//You can Set the maximum-size of your snowflakes
var snowmaxsize = 30
//You can 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 and 3 for center-snowing
and 4 for right-side-snowing
var snowingzone = 1
// You just copy and paste this following lines without
editing
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
//After
declaring the variables lets write some functions
//Following
function create random outputs
function randommaker(range) {
rand = Math.floor(range * Math.random())
return rand
}
//Here i am
writing one function as initshow() where i have written some code for browser
comatibility
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';
}
//Calling the
movesnow() function which is implemented below
movesnow()
}
//Here i have
created a function as movesnow() which will create a looks simillar to snow in
your browser
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>
</body>
</html>
Hope you will like this article.You can find similar types of
articles to choose menu items. Thanks
Shibashish Mohanty
No comments:
Post a Comment
Please don't spam, spam comments is not allowed here.