jQuery snowing effect with Merry Icons

After Merry Icons release we thought of a use case for hand-drawn snowflakes featured in this set. What if we make a snowfall effect with hand-drawn snowflakes?

There are dozens of snowing plugins out there, so we chose one as the basis for the jQuery snowing effect. It provides some nice options, such as snowflake count, z-index, etc.

Instead of using images for snowflake elements, we rendered an icon font containing hand-drawn snowflakes which we also embedded as base64 encoded data into the stylesheet.

We added CSS3 animation to give some rotation to the snowflakes in modern browsers.

The effect is used on any container, overlaying the floating snowflakes over its content (both text and images):

Merry Icons – 100 Christmas Vector Icons by Hand Drawn Goods

Check out Merry Icons and Merry Icons Free to see the plugin implementation on Hand Drawn Goods website.