Wednesday, August 13, 2014

Adding Snow Storm effect to a Webpage easily


At first download the example file from here. After downloading you will get a RAR File. So Extract the RAR file first. There you will found a .html file named FairytipsSnowStorm.html inside the folder. Open this .html file on a browser software like chrome, firefox, safari etc. This is the example of Snow Storm. Move your mouse to and fro on the webpage. Hope you have noticed that the Snow Storm starts from the same side of the mouse pointer. That means if you keep your mouse pointer at the right side then the Snow Storm will start from the right side. If you again keep your mouse pointer in the left side then the Snow Storm will start from the left side. This Snow Storm is created with JavaScript Codes. I haven't used any image to make this Snow Storm. Follow the steps below to add the Snow Storm to a webpage.

 Step 01  Add the JavaScript before the closing </body> tag
You have already got a .html file named FairytipsSnowStorm.html. There you will also get a JavaScript file named Snowstorm.js. No follow the codes given bellow into the box.
<html>
<head>
<body bgcolor="#1E5B82">
YOUR CONTENT HERE
<SCRIPT type="text/javascript" src="snowstorm.js"></script>
</body>
</head>
</html>
The above codes are to create a simple webpage as you have already got one named FairytipsSnowStorm.html. I have added a single line <SCRIPT type="text/javascript" src="snowstorm.js"></script>. I have added this line just before the </body> tag. You have to also add this line before the closing </body> tag of your webpage.
 Step 02  Keep the Snowstrom.js file into the same folder
Look, there is a .js file into the FairytipsSnowstorm folder and there is also the Snowstorm.js JavaScript file in the same folder with the FairytipsSnowStorm.html file. So, you have to also keep this Snowstorm.js file into the same folder with your webpage. That's all about adding Snow Storm to your webpage. The background color should be a deep color for the better result. If you keep the background color white then you won't see any snow storm as the color of snow is also white. :)


No comments:

Post a Comment