jQuery Snow Falling plugin

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.

jquery-snow

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.

  • jqIsoText: jQuery Text Effect Plugin (107)
    Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText. With this […]
  • HTML5/CSS3 Circle Music Player (3)
    More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we […]
  • Use Webcam to Create Animated GIF (1)
    Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice […]
  • mooBarGraph: AJAX graph for MooTools (18)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]
  • Gradienter: Add gradient to elements (24)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]

114 comments on "jQuery Snow Falling plugin"

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/

Paul on December 22, 2017 at 6:38 pm

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?!

Natali Martinez on December 15, 2017 at 9:24 am

Add ‘pointer-events’:’none’ in script, so snowflakes don’t catch click events…

Adrian on December 22, 2016 at 9:23 am

Perfect. Thanks !!

SalvadorReyes.es on November 17, 2017 at 1:50 pm

Leave a Reply to Atar Cancel reply

Your email address will not be published. Required fields are marked *