Yet another jQuery snow plugin...
When I started out writing this plugin I didn’t know there were already many out there. Not that that would have mattered as I simply like a challenging puzzle and a snowdrift is as good a subject as the next.
See it in action: http://rayhyde.github.io/fallingsnow/
A word of warning
Of course I know that using a lot of Javascript animations is bad for your CPU performance, but that is not the point - I wanted the mathematical challenge. And yes, a CSS3 or a canvas solution is easier on your CPU, but a JS solution gives you much more flexibility. So: use this plugin wisely, e.g. minimize the size of your snowdrift by using it within smaller elements, such as the examples here, instead of across the full page width & height.
The goodies
Initial state - I wanted the flakes to be randomly all over the container when the page is loaded, then to start their individual animations from there. This gives a nicer effect than starting with an empty page and only then have the snow beginning to fall from the top.
Flake speed - each flake gets its own random animation speed.
Drifting - The flakes have a deviation from their initial point of falling. This makes the snowflake start at a random new point at the top, but it also causes it to drift when falling.
Parallax - the flakes come in randomly chosen sizes, within bounds. The smaller the size, the slower the speed. This creates a nice 3D parallax effect.
Number of flakes - the number of snowflakes in your element is randomly chosen, but dependent on the size of your element. In short: the width of the container is divided by fourteen, then randomly given plus or minus 10 flakes.
Opacity - if set to true (default) then each flake randomly gets one of three different opacities: 1, 0.8 and 0.7.
How to use this plugin
1. Link the files you need
Include the jQuery script at the bottom of your page, e.g. through a CDN:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
Then include the minimized version of the script:
<script src="[path to your script]/jquery.fallingsnow.min.js"></script>
Change [path to your script] to where it resides, eg "js".
Also make sure to include the CSS file in the <head> section of your page:
<link rel="stylesheet" href="[path to your stylesheet]/jquery.fallingsnow.css">
Change [path to your stylesheet] to where it resides, eg "css".
2. Create your HTML markup
This is very simple: create an element and style the element containing it. Like
<div id="snow-wrapper"> <div id="snow"></div> </div> <style> #snow-wrapper { width: 500px; height: 500px; ... } </style> The #snow element automatically takes on the width and height of the container element.
3. Then call the plugin
Then initialize the plugin, telling it in which element it needs to run (default is "#snow"):
<script> $( "#snow" ).fallingSnow(); </script>
You can change the defaults here too:
<script> $( "#snow" ).fallingSnow({ flakeSizeAdjust: 1.5, flakeSpeedAdjust: 1, drift: 400, }); </script> See the options section for an overview of possible tweaks.
4. Putting it all together
This is your basic page to get the plugin up and running:
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="css/jquery.fallingsnow.css"> <link rel="stylesheet" href="css/myfallingsnow.css"> </head> <body> ... <div class="snow-wrap"> <div id="snow"></div> </div> ... <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="js/jquery.fallingsnow.min.js"></script> <script> $( "#snow" ).fallingSnow(); </script> </body></html>
see the included file "myfallingsnow.html".
Options for your snowdrift
Flake size
You can adjust the overall size of the snowflakes. 0.1 is smaller, e.g. 2 is larger. Default is 1. Decimals are allowed but do not use 0 (zero) as multiplying by zero sets all sizes to 0:
flakeSizeAdjust: 1,
Flake speed
Tweak the general speed of the falling snow. 0.1 is faster, e.g. 5 is slower. Default is 2. Decimals are allowed but do not use 0 (zero) as multiplying by zero cancels all speeds:
flakeSpeedAdjust: 2,
Stop the snow - you can stop the snow falling:
stopOnClick : true,
You can also choose the element on which to click for freezing (pun not intended) the snowfall. Default is #snow:
stopElement: $('#snow), Drift
Set the amount of deviation between top and bottom of the screen when a flake falls. This is randomly generated plus or minus, based on this setting, causing a nice twirling drifting effect. Default is 100:
drift: 100,
My Playground
This project is part of my Playground - a collection of fun (and dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.
Please drop in on my portfolio site www.rayhyde.nl!
