Created
December 13, 2014 00:01
-
-
Save trentmwillis/2199d6d191000b8d8f40 to your computer and use it in GitHub Desktop.
A simple script to make falling snow on any page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
var snowflakes = [], | |
moveAngle = 0, | |
animationInterval; | |
/** | |
* Generates a random number between the min and max (inclusive). | |
* @method getRandomNumber | |
* @param {Number} min | |
* @param {Number} max | |
* @return {Number} | |
*/ | |
function getRandomNumber(min, max) { | |
return Math.floor(Math.random() * (max - min + 1)) + min; | |
} | |
/** | |
* Creates a new snowflake div and returns it. | |
* @method createSnowflake | |
* @return {HTMLElement} | |
*/ | |
function createSnowflake() { | |
var el = document.createElement('div'), | |
style = el.style; | |
style.borderRadius = '100%'; | |
style.border = getRandomNumber(1, 4) + 'px solid white'; | |
style.position = 'fixed'; | |
style.zIndex = '999999'; | |
style.boxShadow = '0 0 2px rgba(255,255,255,0.8)'; | |
style.top = getRandomNumber(0, window.innerHeight) + 'px'; | |
style.left = getRandomNumber(0, window.innerWidth) + 'px'; | |
return el; | |
} | |
/** | |
* Calls the moveSnowflake method for each of the snowflakes in the cache. | |
* @method moveSnowflakes | |
* @return {Void} | |
*/ | |
function moveSnowflakes() { | |
var l = snowflakes.length, | |
i; | |
moveAngle += 0.01; | |
for (i=0; i<l; i++) { | |
moveSnowflake(snowflakes[i]); | |
} | |
} | |
/** | |
* Moves an individual snowflake element using some simple math. | |
* @method moveSnowflake | |
* @param {HTMLElement} el | |
* @return {Void} | |
*/ | |
function moveSnowflake(el) { | |
var style = el.style, | |
height = window.innerHeight, | |
radius, | |
top; | |
radius = parseInt(style.border, 10); | |
top = parseInt(style.top, 10); | |
top += Math.cos(moveAngle) + 1 + radius/2; | |
if (top > height) { | |
resetSnowflake(el); | |
} else { | |
style.top = top + 'px'; | |
} | |
} | |
/** | |
* Puts the snowflake back at the top in a random horizontal start position. | |
* @method resetSnowflake | |
* @param {HTMLElement} el | |
* @return {Void} | |
*/ | |
function resetSnowflake(el) { | |
var style = el.style; | |
style.top = '0px'; | |
style.left = getRandomNumber(0, window.innerWidth) + 'px'; | |
} | |
/** | |
* The kick-off method. Asks how many snowflakes to make and then makes them! | |
* @method setup | |
* @return {Void} | |
*/ | |
function setup() { | |
var number = prompt('How many snowflakes would you like?'), | |
particle, | |
i; | |
// Setup snow particles | |
for (i=0; i<number; i++) { | |
particle = snowflakes[i] = createSnowflake(); | |
document.body.appendChild(particle); | |
} | |
// Set animation intervals | |
animationInterval = setInterval(moveSnowflakes, 33); | |
} | |
setup(); | |
}()); |
I changed again the script and I released a script that generates Christmas Balls, hope you find it nice! Thanks!
/*
* https://gist.github.com/trentmwillis/2199d6d191000b8d8f40#gistcomment-2749653
* Modified javascript to make rain of Christmas balls... the effect is amazing!
*/
(function() {
var christmasballs = [], moveAngle = 0, animationInterval;
var browserWidth = document.body.clientWidth;
var browserHeight = window.innerHeight;
/**
* Generates a random number between the min and max (inclusive).
* @method getRandomNumber
* @param {Number} min
* @param {Number} max
* @return {Number}
*/
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/**
* Generates a random color.
* @method getRandomColor
* @return {Color}
*/
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (i=0; i<6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
/**
* Creates a new christmasball div and returns it.
* @method createChristmasball
* @return {HTMLElement}
*/
function createChristmasball() {
var el = document.createElement('div'), style = el.style;
style.borderRadius = '100%';
style.border = getRandomNumber(4, 8) + 'px solid ' + getRandomColor();
style.position = 'fixed';
style.zIndex = '999999';
style.opacity = '0.9';
style.filter = 'alpha(opacity=90)';
style.top = getRandomNumber(0, browserHeight) + 'px';
style.left = getRandomNumber(0, browserWidth) + 'px';
return el;
}
/**
* Calls the moveChristmasball method for each of the christmasballs in the cache.
* @method moveChristmasballs
* @return {Void}
*/
function moveChristmasballs() {
var l = christmasballs.length, i;
moveAngle += 0.01;
for (i=0; i<l; i++) {
moveChristmasball(christmasballs[i]);
}
}
/**
* Moves an individual christmasball element using some simple math.
* @method moveChristmasball
* @param {HTMLElement} el
* @return {Void}
*/
function moveChristmasball(el) {
var style = el.style, height = browserHeight, radius, top;
radius = parseInt(style.border, 10);
top = parseInt(style.top, 10);
top += Math.cos(moveAngle) + 1 + radius/2;
if (top > height) {
resetChristmasball(el);
} else {
style.top = top + 'px';
}
}
/**
* Puts the christmasball back at the top in a random horizontal start position.
* @method resetChristmasball
* @param {HTMLElement} el
* @return {Void}
*/
function resetChristmasball(el) {
var style = el.style;
style.top = '0px';
style.left = getRandomNumber(0, browserWidth) + 'px';
}
/**
* The kick-off method. Asks how many christmasballs to make and then makes them!
* @method setup
* @return {Void}
*/
function setup() {
var number = prompt('How many Christmas balls would you like?'), particle, i;
// var number = 150, particle, i;
// Setup snow particles
for (i=0; i<number; i++) {
particle = christmasballs[i] = createChristmasball();
document.body.appendChild(particle);
}
// Set animation intervals
animationInterval = setInterval(moveChristmasballs, 33);
}
setup();
}());
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This version has colors that you can choose, you can use your favorite colors for generating corianders!