JS: Falling Snow Effect

By Xah Lee. Date: . Last updated: .
JavaScript raining hearts
JavaScript falling image effect.

This page shows you how to use JavaScript to create a “raining hearts” or “falling snow” effect.

Here's the JavaScript code:

// 2014-08-18
// copyright 2014 Xah Lee
// feel free to use, but must give credit, link back to this page
// from http://xahlee.info/js/js_raining_hearts.html

(function () {
"use strict";

var num_of_hearts = 7;
var driftX = 2; // each frame, drift left/right this much
var driftY = 8;
var update_speed = 100; // millisecond

var heartTypes=["♥","💕","💓","💔","💖","💗","💘","💝","💞","💟","💙","💚","💛","💜"];

var viewportWidth = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;

var viewSpaceWidth = Math.floor(viewportWidth* 1.1);
var viewSpaceHeight = Math.floor(viewportHeight * 1.1);

function randomInt(xmin,xmax) { return Math.floor( Math.random() * (xmax + 1 - xmin) + xmin ); }
function randomReal(xmin,xmax) { return Math.random() * (xmax - xmin) + xmin ; }

function randomColor() { return [randomInt(0,360),randomInt(70,100),randomInt(40,60),randomReal(.2,1)]; }

function restartHeart(el) {
    el.innerHTML= heartTypes[Math.floor( Math.random() * heartTypes.length )];
    el.posX=randomInt(0, viewSpaceWidth);
    el.posY=-50;
    el.size= 20 * (1+Math.random());
    var rColor = randomColor();
    el.style.color="hsla" + "(" +
        rColor[0] + "," +
        rColor[1] + "%," +
        rColor[2] + "%," +
        rColor[3] + ")";
    el.style.left= el.posX + "px";
    el.style.top= el.posY + "px";
    el.style.fontSize = el.size + "px";}

var heart_container = document.createElement("div");
heart_container.setAttribute("id","heart_container");

(function () { // create hearts
var hearts = new Array(num_of_hearts);
for (var i=0; i < hearts.length; i++) {
    var el = document.createElement("div");
    restartHeart(el);
    el.style.position="fixed";
    el.style.zIndex=i+100;
    heart_container.appendChild(el);
} })();

document.body.appendChild(heart_container);

var heartNodes = document.getElementById("heart_container").childNodes;

function update_positions () {

    for (var i = 0; i < heartNodes.length; i++) {
        var thisHeart = heartNodes[i];

        thisHeart.posX += (function () {
            var rnd = Math.random();
            if ( rnd < 0.3333 ) {
                return 0;
            } else if ( rnd < 0.6666) {
                return driftX;}
            else {
                return - driftX;
            }
        })();

        thisHeart.posY = thisHeart.posY + ( (thisHeart.size/20) * (driftY) );

         if ( thisHeart.posY > viewSpaceHeight ) {
            restartHeart(thisHeart);
        } else {
             thisHeart.posY = thisHeart.posY % viewSpaceHeight; };

        thisHeart.style.left = thisHeart.posX + "px";
        thisHeart.style.top= thisHeart.posY + "px";
    }
}

setInterval( update_positions , update_speed);
})();

How Does it Work?

The main thing is to create HTML elements with CSS that's fixed position with respect to window. Each element is a “heart” in its own layer. Then, just create a loop to update the element's positions.

Simple DOM Examples

  1. JS: Change CSS
  2. JS: Change Element's Content
  3. JS: Create HTML Element
  4. JS: Remove HTML Element

  1. JS: document.write
  2. JS: Image Rollover
  3. JS: Pop-up New Window
  4. JS: Digital Clock
  5. JS: Stopwatch
  6. JS: Fade a Element
  7. JS: Fade a Element Using CSS Transition
  8. JavaScript UI: Shake Element
  9. JS: How to Create Tooltip
  10. JS: Falling Snow Effect
  11. JavaScript Floating Box Following Scroll
Like what you read? Buy JavaScript in Depth