Awayken.com

jFlakes

About

Have you ever wanted to put snowflakes on your website in winter? Actually, if you said "yes", you're not alone. I have, too, and I decided to write my own. This jQuery plugin makes it easy to add unicode-based snowflakes to your entire website or just a portion of it.

Usage

When writing up this page, I noticed that jFlakes seems to really spin up the CPU fans. It's probably that the code is leaky. I'll look into it.

Include jQuery, flakes.jquery.js, and the optional flakes.jquery.css somewhere in your document, and then call $.flakes().

jFlakes has four properties you can customize via object literal: type, duration, opacityStart, and opacityEnd

  • type [string | 'snow']: can be 'snow' or 'rain' or you can define your own. 'snow' gets you snow; 'rain' gets you rainy umbrellas. Anything else gets you snowflakes. Also, the type is attached to a class, like flake_snow.
  • duration [number | 20]: is the speed at which you want your flakes to fall.
  • opacityStart [decimal | 1]: is the opacity level you want your flakes to start with.
  • opacityEnd [decimal | 0]: is the opacity level you want your flakes to end with.
<script> (function () { $('body').flakes(); $('p:nth-child(3)').flakes({ 'type': 'rain', 'duration': 100, 'opacityStart': 0.1, 'opacityEnd': 1 }); }()); </script>

Code

This project is available on Github.com. Browse the jFlakes project.

Demo

When writing up this page, I noticed that jFlakes seems to really spin up the CPU fans. It's probably that the code is leaky. I'll look into it. For now, I've removed the iframe of the demo page.

Wanna see it? Visit the demo page.