Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple script to make falling snow on any page
(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();
}());
@alecos71
Copy link

alecos71 commented Nov 2, 2018

Great!!! The only working script without JQuery that works without conflict with Google Code Prettify!!! Thank You very much!!!

Loading

@alecos71
Copy link

alecos71 commented Nov 2, 2018

I removed into my copy:

var number = prompt('How many snowflakes would you like?'), with var number = 100,

Loading

@alecos71
Copy link

alecos71 commented Nov 3, 2018

corianders

I modified your script to make a rain of corianders... the effect is amazing! Hope you like it!

/*
* https://gist.github.com/trentmwillis/2199d6d191000b8d8f40#gistcomment-2749653
* Modified javascript to make rain of corianders... the effect is very amazing!
*/

(function() {
  var corianders = [], moveAngle = 0, animationInterval;
  var browserWidth = document.body.clientWidth;
  var browserHeight = window.innerHeight;
  /**
   * 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;
  }
  /**
   * 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 coriander div and returns it.
   * @method createCoriander
   * @return {HTMLElement}
   */
  function createCoriander() {
    var el = document.createElement('div'), style = el.style;
    style.borderRadius = '0px';
    style.border = getRandomNumber(4, 8) + 'px solid ' + getRandomColor();
    var degrees = getRandomNumber(1, 360);
    style.WebkitTransform = 'rotate(' + degrees + 'deg)';
    style.msTransform = 'rotate(' + degrees + 'deg)'; 
    style.transform = 'rotate(' + degrees + 'deg)';
    style.position = 'fixed';
    style.zIndex = '999999';
    style.opacity = '0.9';
    style.filter = 'alpha(opacity=90)';
    style.boxShadow = '0 0 2px rgba(255,255,255,0.8)';
    style.top = getRandomNumber(0, browserHeight) + 'px';
    style.left = getRandomNumber(0, browserWidth) + 'px';
    return el;
  }
  /**
   * Calls the moveCoriander method for each of the corianders in the cache.
   * @method moveCorianders
   * @return {Void}
   */
  function moveCorianders() {
    var l = corianders.length, i;
    moveAngle += 0.01;
    for (i=0; i<l; i++) {
      moveCoriander(corianders[i]);
    }
  }
  /**
   * Moves an individual coriander element using some simple math.
   * @method moveCoriander
   * @param {HTMLElement} el
   * @return {Void}
   */
  function moveCoriander(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) {
      resetCoriander(el);
    } else {
      style.top = top + 'px';
    }
  }
  /**
   * Puts the coriander back at the top in a random horizontal start position.
   * @method resetCoriander
   * @param {HTMLElement} el
   * @return {Void}
   */
  function resetCoriander(el) {
    var style = el.style;
    style.top = '0px';
    style.left = getRandomNumber(0, browserWidth) + 'px';
  }
  /**
   * The kick-off method. Asks how many corianders to make and then makes them!
   * @method setup
   * @return {Void}
   */
  function setup() {
    var number = prompt('How many corianders would you like?'), particle, i;
    // var number = 150, particle, i;
    // Setup snow particles
    for (i=0; i<number; i++) {
      particle = corianders[i] = createCoriander();
      document.body.appendChild(particle);
    }
    // Set animation intervals
    animationInterval = setInterval(moveCorianders, 33);
  }
  setup();
}());

Loading

@alecos71
Copy link

alecos71 commented Nov 14, 2018

This version has colors that you can choose, you can use your favorite colors for generating corianders!

/*
* https://gist.github.com/trentmwillis/2199d6d191000b8d8f40#gistcomment-2749653
* Modified javascript to make rain of corianders... the effect is very amazing!
* This version has colors that you can choose, you can use your favorite colors
*/

(function() {
  var corianders = [], moveAngle = 0, animationInterval;
  var browserWidth = document.body.clientWidth;
  var browserHeight = window.innerHeight;
  /**
   * Generates a random color.
   * @method getRandomColor
   * @return {Color}
   */
  function getRandomColor() {
    var colors = ['#000000','#0078d7','#111111','#1d1e22','#1e2024','#1f798f','#202125','#222222','#333333','#34363e','#34363f','#36383f','#3f414b','#47cf73','#4c4f5a','#555555','#616574','#666666','#666b7a','#666b7b','#76daff','#808080','#9396a4','#96b38a','#9a8297','#a7925a','#acacac','#c5c8d4','#cccccc','#d0782a','#ddca7e','#e3e3e3','#eaedf0','#eaeff0','#ececec','#eeeeee','#fdf5cf','#ff0000','#ff3c41','#ffdd40','#ffffe0','#ffffff']; // favorite colors
    var color = colors[Math.floor(Math.random() * colors.length)];
    return color;
  }
  /**
   * 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 coriander div and returns it.
   * @method createCoriander
   * @return {HTMLElement}
   */
  function createCoriander() {
    var el = document.createElement('div'), style = el.style;
    style.borderRadius = '0px';
    style.border = getRandomNumber(4, 8) + 'px solid ' + getRandomColor();
    var degrees = getRandomNumber(1, 360);
    style.WebkitTransform = 'rotate(' + degrees + 'deg)';
    style.msTransform = 'rotate(' + degrees + 'deg)'; 
    style.transform = 'rotate(' + degrees + 'deg)';
    style.position = 'fixed';
    style.zIndex = '999999';
    style.opacity = '0.9';
    style.filter = 'alpha(opacity=90)';
    style.boxShadow = '0 0 2px rgba(255,255,255,0.8)';
    style.top = getRandomNumber(0, browserHeight) + 'px';
    style.left = getRandomNumber(0, browserWidth) + 'px';
    return el;
  }
  /**
   * Calls the moveCoriander method for each of the corianders in the cache.
   * @method moveCorianders
   * @return {Void}
   */
  function moveCorianders() {
    var l = corianders.length, i;
    moveAngle += 0.01;
    for (i=0; i<l; i++) {
      moveCoriander(corianders[i]);
    }
  }
  /**
   * Moves an individual coriander element using some simple math.
   * @method moveCoriander
   * @param {HTMLElement} el
   * @return {Void}
   */
  function moveCoriander(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) {
      resetCoriander(el);
    } else {
      style.top = top + 'px';
    }
  }
  /**
   * Puts the coriander back at the top in a random horizontal start position.
   * @method resetCoriander
   * @param {HTMLElement} el
   * @return {Void}
   */
  function resetCoriander(el) {
    var style = el.style;
    style.top = '0px';
    style.left = getRandomNumber(0, browserWidth) + 'px';
  }
  /**
   * The kick-off method. Asks how many corianders to make and then makes them!
   * @method setup
   * @return {Void}
   */
  function setup() {
    var number = prompt('How many corianders would you like?'), particle, i;
    // var number = 150, particle, i;
    // Setup snow particles
    for (i=0; i<number; i++) {
      particle = corianders[i] = createCoriander();
      document.body.appendChild(particle);
    }
    // Set animation intervals
    animationInterval = setInterval(moveCorianders, 33);
  }
  setup();
}());

Loading

@alecos71
Copy link

alecos71 commented Nov 21, 2018

I changed again the script and I released a script that generates Christmas Balls, hope you find it nice! Thanks!

christmas balls

/*
* 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();
}());

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment