Snow Falling Animation in Windows Store App Using jQuery

Introduction

In this article we will show some animation in a Metro Style Application using the plugin jQuery. So here we will create a snowfall animation scenery in a HTML page of a Metro application.

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it.

  • Open Visual Studio 2012
  • File -> New -> Project
  • Choose Template -> JavaScript -> Metro Style Application
  • Rename the application

img11.gif

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

img2.gif

Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following are the contents of the project:

 

  • JavaScript Code

  • Style Sheet Code

Code :

 

 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="snowfall.jquery.js"></script>

    <script src="/js/default.js"></script>

   <script type="text/javascript">

       $(document).ready(function () {

           $('#click1').click(function () {

               $('#snow_fall').snowfall({

                   flakeCount: 90,

                   flakeColor: '#ffffff',

                   flakeIndex: 999999,

                   minSize: 1,

                   maxSize: 6,

                   minSpeed: 2,

                   maxSpeed: 5

               });

           });

           $('#input1').click(function () {

               $('#view').show();

               $('#view').snowfall({ flakeCount: 100, maxSpeed: 10 });

           });

       });

</script>

Code :

<style type="text/css">

    .div1

    {

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)),

        color-stop(0%,rgba(0,0,0,1)),

       color-stop(12%,rgba(89,89,89,1)),

        color-stop(25%,rgba(102,102,102,1)),

        color-stop(39%,rgba(71,71,71,1)),

        color-stop(50%,rgba(44,44,44,1)),

        color-stop(60%,rgba(17,17,17,1)),

        color-stop(76%,rgba(43,43,43,1)),

        color-stop(91%,rgba(28,28,28,1)),

        color-stop(100%,rgba(19,19,19,1)));

         height:400px;

         width:600px;

         border:5px groove Navy;

    }

    .h1

    {

        font-family:Comic Sans MS;

        background:black;

    }

    .input

    {

        background-color:Maroon;

        height:30px;

        width:120px;

        font-family:Comic Sans MS;

        font-size:larger;

        color:Yellow;

        margin:150px 0px 0px 750px;

    }

   .img

   {

       position:absolute;

       margin-top:-310px;

       border:5px groove yellow;

   }

</style>

 

Step 4 : The complete code of this application is written below. It contains the code of HTML file code and JavaScript file code.

 

Code :

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>App21</title>

 

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

 

    <!-- App21 references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="snowfall.jquery.js"></script>

    <script src="/js/default.js"></script>

   <script type="text/javascript">

       $(document).ready(function () {

           $('#click1').click(function () {

               $('#snow_fall').snowfall({

                   flakeCount: 90,

                   flakeColor: '#ffffff',

                   flakeIndex: 999999,

                   minSize: 1,

                   maxSize: 6,

                   minSpeed: 2,

                   maxSpeed: 5

               });

           });

           $('#input1').click(function () {

               $('#view').show();

               $('#view').snowfall({ flakeCount: 100, maxSpeed: 10 });

           });

       });

</script>

<style type="text/css">

    .div1

    {

        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)),

        color-stop(0%,rgba(0,0,0,1)),

       color-stop(12%,rgba(89,89,89,1)),

        color-stop(25%,rgba(102,102,102,1)),

        color-stop(39%,rgba(71,71,71,1)),

        color-stop(50%,rgba(44,44,44,1)),

        color-stop(60%,rgba(17,17,17,1)),

        color-stop(76%,rgba(43,43,43,1)),

        color-stop(91%,rgba(28,28,28,1)),

        color-stop(100%,rgba(19,19,19,1)));

         height:400px;

         width:600px;

         border:5px groove Navy;

    }

    .h1

    {

        font-family:Comic Sans MS;

        background:black;

    }

    .input

    {

        background-color:Maroon;

        height:30px;

        width:120px;

        font-family:Comic Sans MS;

        font-size:larger;

        color:Yellow;

        margin:150px 0px 0px 750px;

    }

   .img

   {

       position:absolute;

       margin-top:-310px;

       border:5px groove yellow;

   }

</style>

</head>

<body>

 <form id="form1" runat="server">

   

    <div id="snow_fall" class="div1" >

   

    <img src="kasmir.jpg" style="width:600px;height:400px" />

    </div>

      <div><h1 id="click1" class="h1">Show Snowfall Effect</h1></div>

   

    </form>

</body>

</html>

 

Step 5 : After running this code the output looks like this:

 img3.gif

Click on Text to start the snow falling.

img4.gif


Similar Articles