let-it-snow
View demo
This is a little experiment on creating CSS snowflakes that stick/collect to elements. The collection of snowflakes is not the most realistic it could be but, hey, the logic is there!
Disclaimer: the JavaScript is really just an experiment and I can't vouch for the performance of it. While it doesn't noticeably slow down a page, there's a little callback hell that could definitely be cleaned up. This is only my attempt at the getting the logic down :)
Instantiation
$.letItSnow('.let-it-snow', { stickyFlakes: 'lis-flake--js', makeFlakes: true, sticky: true });
Usage
You can definitely use just the CSS for some nice snowflakes. To do so, you can either create a bunch (100 is what I use) of elements on your page with the class name .lis-flake
(<span class="lis-flake"></span>
) OR use the JavaScript plugin to create them for you by setting the sticky
property to false
.