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(); | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I changed again the script and I released a script that generates Christmas Balls, hope you find it nice! Thanks!