I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That’s why I enjoy watching how snow falling even if that’s only on my monitor.
Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed.
First include jQuery and jquery.snow.js or jquery.snow.min.js in head of your document:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script src="jquery.snow.js"></script>
Than, anywhere in you document call snow plugin like this:
<script> $(document).ready( function(){ $.fn.snow(); }); </script>
This plugin have few options that you can play and adjust snow falling effect:
minSize - min size of snowflake, 10 by default maxSize - max size of snowflake, 20 by default newOn - frequency in ms of appearing of new snowflake, 500 by default flakeColor - color of snowflake, #FFFFFF by default
Parameters can be passed like this:
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' });
Be careful with newOn parameter since that frequently appearing of new snowflake can affect on performance.
If you integrate the plugin in an existing site, the snowflakes may disappear or hide after div’s with an higher z-index. So I changed jquery.snow.js to contain a higher index:
.css({‘position’:’absolute’,’z-index’:’5′,’top’:’-50px’})
See the result: http://www.dikkelvensefeesten.be/
I have no idea what any of this means and how to do it?! Can someone help as I don’t know what head of what document it’s talking about and what to do with it from there?!
Add ‘pointer-events’:’none’ in script, so snowflakes don’t catch click events…
Perfect. Thanks !!