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