Friday, December 20

Snow falls using javascript


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.

ShibashishMnty
shibashish mohanty