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
Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:
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;
Join the conversation! Your thoughts help the community grow.