Creating Snow Falling Effect with jQuery snowfall Plugin

Creating Snow Falling Effect with jQuery snowfall Plugin
File Size: 123 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

snowfall is a small jQuery plugin for simulating snowflakes falling with a little parallax effect on your web site, by using HTML5 <canvas> element. Ideal for Christmas and Winter themed websites.

Your might also like:

Basic Usage:

1. Include jQuery javascript library and jQuery snowfall plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/snowfall.js" type="text/javascript"></script>

2. Create a <canvas> element used to draw snowflakes.

<canvas id="snowfall"></canvas>

3. Initialize the snowfall plugin on the canvas element.

$(document).ready(function() {
$("#snowfall").Snowfall({
amount: 500 //Amount of particles
});
});

4. Available options.

$(document).ready(function() {
$("#snowfall").Snowfall({
//Sizing
sizingMode: 'window',//Either css (get pixel value from element css), parent (size canvas to parent size), explicit (use values below) or window (full screen canvas)
width: 800,//In case of sizingMode explicit: use this width for the canvas
height: 600,//In case of sizingMode explicit: use this height for the canvas

//Amount of particles
amount: 50,//Amount of particles that will be created

//Positioning
horizontalOffsetLeft:0,//Horizontal offset from the left (can be positive or negative) in px, to shift starting point, useful when having diagonal snow
horizontalOffsetRight:0,//Horizontal offset from the right (can be positive or negative) in px, to shift starting point, useful when having diagonal snow
verticalOffsetTop:0,//Vertical offset from the top (can be positive or negative) in px, useful for the start position of the snow above the canvas

//Vertical speed configuration
verticalSpeed: 23,//Somewhere between 0.5 and 10 works best
randomVerticalSpeed: true,//True or false
minimumRandomVerticalSpeed: 3,//Minimum shouldn't be lower than zero and probably heigher than 0.5
maxiumumRandomVerticalSpeed: 5,//Maxiumum shouln't be lower than zero and probably lower than 10

//Horizontal speed configuration
horizontalSpeed:0,//Somewhere between -10 and 10 works best, negative values for left moving particles
randomHorizontalSpeed: true,//True or false
minimumRandomHorizontalSpeed: 2,//Minimum horizontal speed, can be negative for moving to the left.
maxiumumRandomHorizontalSpeed:5,//Maxiumum horizontal speed, can be negative for moving to the left.
horizontalMirroring: true,//When set to true, particles which go out of screen horizontally will emerge at the other side

//Wind
wind:true,//Set to true to enable a basic wind element to the particles
minimumWind:2,//Minimum wind speed (can be negative)
maximumWind:10,//Maximun wind speed (can be negative)
windPeriod:10,//Period in which the wind comes full circle again and starts again

//Graphics
graphicMode: false,//True or false, draws a circle when false
radius: 4,//In case graphicMode false: radius for drawn circles
randomRadius: true,//In case graphicMode false: toggle random radius for drawn circles
minimumRandomRadius:1,//In case graphicMode false: minimum random radius
maxiumRandomRadius:2,//In case graphicMode false: maximum random radius
graphics: [
'images/flake2.png',
'images/flake.png'
]//In case graphicMode true: array of image urls to use
});
});

Change log:

2013-12-10

  • add wind functionality.

2013-12-09

  • add sizing options.

2013-12-07

  • add a lot of options to customize the animations and snowflakes.

This awesome jQuery plugin is developed by ZwaarContrast. For more Advanced Usages, please check the demo page or visit the official website.