JSFiddle - React, Tailwind, and code Playground
JavaScript
/**
* Instant Snowstorm, rev 2
* (c) Copyright 2012 DWUser.com. All rights reserved.
* by Nathan Rohler
* Released under MIT License
*/
(function() {
// Only supported in IE8+
if ($.browser.msie && parseInt($.browser.version) < 8) return;
// -------------------------------
// --- Configuration variables ---
// -------------------------------
// How many frames per second? More => smoother but more processor intensive
var fps = 30;
// How often should flakes be added? Every 10 frames by default. Greater => fewer flakes
var addNewFlakesEveryNFrames = 10;
// How many flakes should be added each time? Greater => more flakes, more processor intensive
var newFlakesToAdd = 3;
// Controls the speed; 0.7 provides a nice speed
var speedControl = 0.7;
// -------------------------------
// -------------------------------
// -------------------------------
// Holder variables
var flakes = [];
var additionCounter = 0;
// The flake creator function
function createFlake(curX, curY) {
// How unique should each flake be? These values specify max unique speed and wiggle/drift
var maxSpeedOffset = 2;
var maxWiggleOffset = 10;
// How big should the flakes be?
var minSize = 5;
var maxSize = 15;
// How much drifting/wiggling should be allowed in the downward path?
var minWiggle = 10;
var maxWiggle = 40;
var sizePercent = Math.random();
var size = Math.floor(sizePercent * (maxSize - minSize) + minSize);
var opacity = 0.3 + Math.random() * 0.7;
if ($.browser.msie && parseInt($.browser.version) < 10) //disable transparency on old IE to make rendering easier
opacity = undefined;
var color = '#9CF';
// Create a unique speed offset, so each flake falls at a unique rate
var speedOffset = Math.floor(Math.random() * maxSpeedOffset);
//...