The end of 2013 is approaching and that means that Christmas and the New Year are just around the corner. To stay true to the holiday spirit, today I have decided to create a plugin based off the reply from Jason Brown as a solution to this question, that will allow you to add a beautiful interactive snow animation to your website.
What’s the difference between Jason’s solution and this plugin? The plugin creates an abstract interface to let you control how the snow behaves without diving into the source code. I’ve also added a few functions such as responsive, a snow direction etc.
Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.
[tut demo=”https://onextrapixel.com/examples/let-it-snow/” download=”https://onextrapixel.com/examples/let-it-snow/let-it-snow.zip”]
Learn How to Create Falling Snow on Your Website
How does this work?
The solution that Jason provided is one of the cleanest and easiest to understand. He manages to create a calculation that allows HTML5 Canvas to animate snow realistically. Basically his solution creates a circle element inside the HTML5 canvas and randomly positioned on top of the screen and moves the snow downward. In order to create the variety of size and opacity, he added a random variable to the calculation so that it would create a dimension to the effect. One genius thing he did with the solution is that he added a COS to the calculation of the snow’s direction so that the snow would fall downward with a wavy animation (genius!). This gave me a base that allowed me to add more features to put the control of the snow to the developers.
Firstly I decided to make the animation responsive and not skewed when a window is resized. There’s no easy way to do this so I decided to go with the hacky way. When the window is being resized, the plugin will wait for a few milliseconds for the resize to finish and once that is done, the plugin will clone the original canvas, append to the current one and remove the current one so that the plugin can apply the same effect to the new canvas. This workaround prevents the canvas from scaling and skewing disproportionately when the window is being resized.
The second thing I added to Jason’s awesome solution is a way to determine the direction of the snow. This is quite difficult because the snow is positioned at the top before it starts to fall and if the wind blows too hard to the right, the left area of the page will be empty as the snow won’t get a chance to fall down and fill up the left side of the screen. I ended up using a bunch of hacks to randomly position the snow along the edges of the screen in the opposite direction to the wind so that it would solve the space issue.
Last but not least, Jason’s code is beautifully created but some developers may have a hard time figuring out which value to change to create the effect they want so I decided to surface all the options and let you personalize the effect such as determining the size, opacity and number of snow through the “let_it_snow” function. In the next section, we will explore the possibilities of what this plugin can do.
How-Tos
Since this is a jQuery plugin, please include the latest jQuery library available here, jQuery.flipping_gallery.js which can be found here, in to your document’s <head>.
Once that is done, all you have to do is add a canvas inside your <body> tag like this:
HTML:
<body> .. <canvas class="snow" width="100%" height="100%"></canvas> .. </body>
Now call the function on the canvas as follows:
JS:
$("canvas.snow").let_it_snow({
speed: 0,
interaction: true,
size: 2,
count: 200,
opacity: 0,
color: "#ffffff",
windPower: 0,
image: false
});
The plugin will automatically fill the canvas with falling snow with the default settings shown above. All you have to do is position the canvas on your website however you like and the HTML5 canvas will do its magic.
Now, it’s time explore the possibilities of this plugin:
- speed: This option lets you control the speed of the snow fall. The higher, the faster. Recommended values are somewhere between 0 and 5. The default value is 0.
- interaction: This option lets you toggle the interaction of the snow. If set to true, the snow will react to your cursor and move away creating a beautiful interaction effect. Set this to false if you don’t want that. The default value is true.
- size: You can define the average size of the snow here. Recommended values are somewhere between 0 and 10. The higher, the bigger. The default value is 2.
- count: This will let you control the maximum amount of snow falling on the screen at the same time. The default value is 200.
- opacity: This option will let you control the average opacity of the snow. Set this to 1 if you don’t want any opacity. Recommended values are decimal between 0.0 and 1.0. The default value is 0.
- color: You can define the color of the snowflakes here. Acceptable format is the full 6 characters HEX color code (#FFFFFF). The default value is “#ffffff”.
- windPower: You can define which direction the wind blows here. If you want the wind to blow to the right, put a positive number here. If you want the wind to blow in the other direction, put a negative number here. The higher (for positive) /lower (for negative) the number, the heavier the wind blows. The default value is 0.
- image: You can use your own custom image as a snowflake instead of the default circle by defining the path to the image file here. Toggle this to false to revert back to using our default circle. The default value is false.
[tut demo=”https://onextrapixel.com/examples/let-it-snow/” download=”https://onextrapixel.com/examples/let-it-snow/let-it-snow.zip”]
Conclusion
Now you are ready for the holidays! I hope you enjoy this tutorial. Big thanks to Jason Brown for providing an elegant solution and if you have any questions, suggestions, or something to show us, feel free to let us know in the comments below.
