Creating Falling Snow in HTML/JS

by kirupa | 29 November 2011

Have questions? Discuss this HTML5 tutorial with others on the forums.

There is no effect that captures the Christmas / Winter / New Year time better than falling snow. The only thing that may be better is being able to recreate that effect inside your web sites and applications using just HTML, CSS, and JavaScript.

To see the falling snow effect for yourself, go here or watch the video below:

[ you can see a live example ]

By the end of this tutorial, you will learn how to easily add the falling snow effect to your HTML application/site, and you will also learn why the effect works in great detail ...so that you can impress your friends and family over the holidays, of course.

Adding the Effect

First, let's get the falling snow effect up and running in your HTML document. There are two parts to this: adding the HTML/CSS and adding the JavaScript.

Adding the HTML/CSS

Just below your closing body tag (</body>), add the following HTML:

<div id="snowFlakeContainer">
<p class="snowflake">*</p>
</div>

Next, add the following CSS rule:

.snowflake {
}

You can place the CSS inside its own style block on the page, or you can place the CSS in its own file and reference it via the link tag. It's all good, so pick whichever one works for you.

Adding the JavaScript

The final step is for you to add your JavaScript that creates the snowflakes and makes them fall. The easiest thing you can do is just add the script tag that contains a reference to our JS file:

<script src="http://kirupa.googlecode.com/svn/trunk/snow.js"></script>

You can place this tag anywhere in your HTML document, but I prefer to keep them between the head tags.

The downside with using this script is that you cannot make changes to your JavaScript file because it isn't hosted on your server. If you want to take a few extra steps, you can download it, extract it, upload it to your server, and then do what you wish with it.

Just make sure you update your script reference to point to your version of the file on your server:

<script src="blah/snow.js"></script>

This is important - as long as you promise to do good, do whatever you want with the code. To get more technically, this code falls under the MIT license. If this doesn't satisfy you (or your lawyers), please contact me.

Testing

Once you have added the HTML / CSS / JavaScript to your document, you will now have a working falling snow effect. Remember, by default, the snowflake is white. You can change the snowflake's color by modifying the color property in the .snowflake rule, or you can change your page's background to a darker color to ensure you can see the falling snow.

If you are having difficulty getting this effect to work, take a look at the markup in my Falling Snow Example.

Well, that's all there is to adding this effect to your own project! If you want to learn more about how this effect works or how to modify it, read on. Otherwise, hope you liked this effect. I always like hearing about what works and what doesn't, so feel free to drop me a line here.

Deconstructing Why it Works

Now that you have a working example of falling snow, all that remains is learning why it works the way it does. What we are going to do in the next many sections is look at each line of markup and code to see how it all comes together to create the falling snow effect that you see.

Before looking into the code, let's take a few steps back and verbally describe how everything works.

One is the loneliest number...

In the beginning, you start off with a single snowflake that is defined in the HTML. A snowflake in our effect is basically just the asterisk (*) character:

a lonely asterisk

[ i can haz friends? ]

This snowflake is located inside a parent container that will end up hosting all of the snowflakes that you see. To make sure your snowflake's looks can customized, you have a CSS rule defined, and this rule initially makes your snowflake look white:

white snowflake

[ still lonely ]

So, right now, we have a single snowflake, its container, and a CSS rule defined. That's it for the HTML and CSS.

The remaining functionality is provided entirely by JavaScript. Our JavaScript first takes care of creating many snowflakes based on the single one we currently have:

many snowflakes

[ oh look, friends! ]

Along the way, it gives each snowflake a random size and opacity:

different sizes and opacity

[ oh look! cool looking friends ]

The final important thing that our JavaScript does is animate the snowflake. Sorry, I don't have a way of visualizing that using a static image haha.

In the proceeding sections, we will dive into the HTML, CSS, and JavaScript and see how everything comes together to create the effect that you see.

The HTML and CSS

Let's start with the HTML and CSS first. Your HTML is:

<div id="snowflakeContainer">
<p class="snowflake">*</p>
</div>

Notice that you have a div called snowflakeContainer, and inside the div you have a p tag with the class value of snowflake. Your p tag's content is the asterisk character - the universal character for snow! In a later section, I will explain what to do if you want to change what is displayed.

This is all pretty straightforward, so let's look at your CSS next:

.snowflake {
}

Your snowflake style rule sets the position of each snowflake to be fixed, and its color is set to white. We set the position to fixed so that we can ensure that the snowflake's position is relative to the browser window. The color...well, that just specifies the color!

The JavaScript

As you saw from the overview earlier, the bulk of the deconstruction will focus on the JavaScript, so let's start from the very top and jump around till everything has been examined.

Global Variables

We start off by declaring a few variables globally:

// array to store our Snowflake objects
var snowflakes = [];

// global variables to store our browser's window size
var browserWidth;
var browserHeight;

// specify the number of snowflakes you want visible
var numberOfSnowflakes = 25;

You'll see all of these variables used shortly, but be aware that the snowflakes variable defines an array, and the numberOfSnowflakes variable is initialized with a value of 25.

Getting it All Started

Next up is the setup function which is the gateway to the heart of our code:

function setup() {
}
setup();

In this function, we listen for three events and specify the appropriate event handler for those events.

The first thing we do is listen for the DOMContentLoaded event and provide an event listener named generateSnowflakes that gets called when our DOM has fully loaded. As you will see shortly, generateSnowflakes is where a lot of things go down.

The next two events we listen for are the resize and focus events, and the event handlers for them are resetPositions and tabHasFocus respectively. You'll see them discussed in greater detail towards the end.

From One to Many

As you just saw, the moment our DOM gets loaded, we call the generateSnowflakes function which is responsible for creating the many snowflakes that make up our effect:

function/span> generateSnowflakes(e) {

}

This function does a fair number of things, but at a high level, it is responsible for taking the "snowflake" we've defined in our HTML, duplicating it, associating it with a class, giving it some unique visual properties, and then animating them.

Let's start from the top:

// get our snowflake element from the DOM and store it
var originalSnowflake = document.getElementsByClassName("snowflake")[0];;

We declare a variable called originalSnowflake and use it to get a reference to our snowflake element that we have defined in our HTML. The snowflake element we want, our p element with the asterisk character, is known primarily by its class value of snowflake:

<div id="snowFlakeContainer">
<p class="snowflake">*</p>
</div>

To reference this element via JavaScript, we use the getElementsByClassName function and pass it the class value of snowflake. Because the getElementsByClassName function returns an array, we specify that we want only the first item by specifying it via [0].

You can learn more about techniques like this in the Referencing Elements via JavaScript tutorial.

In the next line, we hook into the parent of our snowflake:

// access our snowflake element's parent container
var snowflakeContainer = originalSnowflake.parentNode;

We declare a variable called snowflakeContainer, and assign it our snowflake's parent by calling parentNode on the originalSnowflake object that you declared just a few moments earlier.

Next, we initialize some variables that we declared at the beginning:

// set our browser's size
browserHeight = window.outerHeight;
browserWidth = window.outerWidth;

We set the browserHeight and browserWidth variables to the height and width of our browser using the window object's outerHeight and outerWidth properties.

After all this, we get to the real interesting part of this function - the loop that creates the many snowflakes:

// create each individual snowflake
for (var i = 0; i < numberOfSnowflakes; i++) {

}

In this block of code, I first specify a for loop that goes on until it reaches the limit specified by the numberOfSnowflakes variable. If you recall, the numberOfSnowflakes variable was declared earlier, and it has an initial value of 25.

Each time our loop runs, we create a copy of our snowflake defined in HTML, add it back to our HTML, and then create the snowflake object with all of its unique properties:

// clone our original snowflake and add it to snowflakeContainer
var snowflakeCopy = originalSnowflake.cloneNode(true);
snowflakeContainer.appendChild(snowflakeCopy);

// set our snowflake's initial position and related properties
var initialXPos = setPosition(50, browserWidth);
var initialYPos = setPosition(50, browserHeight);
var speed = 5 + Math.random() * 40;
var radius = 4+Math.random() * 10;

// create our Snowflake object
var snowflakeObject = new Snowflake(snowflakeCopy, radius, speed, 0, initialXPos, initialYPos );

The way you create a copy of an element is by calling the cloneNode function:

var snowflakeCopy = originalSnowflake.cloneNode(true);

You call the cloneNode function on the DOM object you wish to clone, and in our case, that is the DOM element(s) referenced by the originalSnowflake variable that you saw earlier. The result of this function running is a pointer to the newly copied element, and we store that in the snowflakeCopy variable.

Simply having a pointer to the newly copied element is not enough for you to see it. You need to add it back to your DOM, and that is done by calling appendChild:

snowflakeContainer.appendChild(snowflakeCopy);

The appendChild function works by adding a DOM element (snowflakeCopy) as the child of another DOM element (snowflakeContainer). If you remember, snowflakeContainer was the parent of our originalSnowflake.

Next up, we declare some properties that will define how our snowflake looks and moves:

// set our snowflake's initial position and related properties
var initialXPos = setPosition(50, browserWidth);
var initialYPos = setPosition(50, browserHeight);
var speed = 5+Math.random()*40;
var radius = 4+Math.random()*10;

The properties we specify here are the initial X and Y position, the speed, and the radius. For the X and Y position, I use a function called setPosition, and we'll look at that one a bit later. For now, just know that it returns a number.

The end result is that all four of these variables store a number.

Moving down, the next thing that happens is big. We take our collection of properties and our newly created snowflake and formally contain them inside a Snowflake object based on the Snowflake class:

// create our Snowflake object
var snowflakeObject = new Snowflake(snowflakeCopy, radius, speed, initialXPos, initialYPos );
snowflakes.push(snowflakeObject);

What we are doing here is creating a new object of type Snowflake and passing in the values for our new snowflake, radius, speed, and initial X/Y positions. You'll look at the Snowflake class shortly, so you'll be seeing what happens to these values shortly.

Once we have created our new Snowflake object, stored in the snowflakeObject variable, we add it to our snowflakes array for storage. If you recall, our snowflakes array is declared globally, so you'll see later that we use it quite frequently in various parts of our code.

Quick Recap
We covered a lot of ground here, so before we wish our for loop goodbye, let's do a quick recap. Much of the code you saw runs inside the loop, and the duration of our loop is determined by numberOfSnowflakes. Currently, that value is set to 25.

What this means is that we create 25 copies of our original snowflake, create random properties for each one, create a Snowflake object, and add each Snowflake object to our snowflakes array.

We are almost nearing the end of the generateSnowflakes function! The next thing we do is remove the snowflake we originally defined in our HTML:

snowflakeContainer.removeChild(originalSnowflake);

This seems a little bit morbid - given that this originalSnowflake was the source of all the other little snowflakes we created. The reason is pretty simple - its only use was to serve as a template for the snowflakes we wanted. Having special code to add the various properties and wrap it into a Snowflake object was just unnecessary. The easiest thing to do would be to just get rid of it. It is nothing personal.

The last thing we do is get our timer started for our animation:

setInterval(moveSnowflakes, 30);

This is done using the setInterval method, and we have it set to call the moveSnowflakes function once every 30 milliseconds (~33.33 frames per second).

You can learn more about frame rates in HTML/JavaScript here....after this tutorial of course :P

Snowflake Class

In the previous section, you saw that each snowflake is represented by a Snowflake object. Behind every great object is a great class, so let's look at the Snowflake class in detail:

//
// constructor for our Snowflake class
//
function Snowflake(element, radius, speed, xPos, yPos) {

}

Don't let the number of lines overwhelm you - it is actually quite straightforward and can be summed up in two parts.

The first part of our code deals with taking the arguments passed in and making them properties of the object and representing them in our snowflake DOM element. The second part is responsible for defining a function that, when called repeatedly, will update the X and Y position properties to simulate movement.

We'll look at both parts in greater detail.

Our Snowflake class starts off as a function that accepts the following arguments:

function Snowflake(element, radius, speed, xPos, yPos)

The first thing we do is take the values of these arguments and make them properties of the Snowflake itself:

// set initial snowflake properties
this.element = element;
this.radius = radius;
this.speed = speed;
this.xPos = xPos;
this.yPos = yPos;

Notice that I prefix our properties meant to be in the context of our Snowflake class with the this keyword.

There is nothing fancy that goes on here. The radius, speed, xPos, and yPos properties store a number. The element property, though, stores a pointer to a DOM element that corresponds to a copy of our snowflake.

Next, we continue declaring and initializing some variables:

// declare variables used for snowflake's motion
this.counter = 0;
this.sign = Math.floor(Math.random() * 2);

if (this.sign == 1) {
} else {
}

First, we create a counter variable that will be used to keep track of our movement.

Next, we create a sign property whose value is either going to be 1 or -1 depending on the result of the Math.floor(Math.random()*2) expression. The result of this calculation will be used to specify the direction of our movement.

Up until now, all we've really done is just declare properties and set them to interesting values. That changes with the next two lines:

// setting an initial opacity and size for our snowflake
this.element.style.opacity = .1+Math.random();
this.element.style.fontSize = 12+Math.random()*50 + "px";

What we are doing here is setting our snowflake object's opacity and font size programmatically. This is possible because, if you recall, our element property stores a pointer to a DOM element where setting the appropriate style property works.

After these two lines have run, the snowflake referenced by our Snowflake object will actually end up looking different!

To reuse an image I used earlier, with the exception of the positions, your snowflakes will look sort of like the following:

different sizes and opacity

[ your snowflakes will have unique opacities and font sizes ]

Next up, we have the all-important update function that is responsible for animating the various properties smoothly to create the falling snow effect:

this.update = function () {

}

The first few lines involve manipulating values of the counter, xPos, and yPos properties:

this.counter += this.speed/300;
this.xPos += this.sign*this.speed*Math.cos(this.counter)/20;
this.yPos += this.speed/10;

The counter property increments very slightly each time (this.speed/300) the update function is called. It is this small change in value that, when passed into the Math.cos function, that causes the horizontal oscillation that you see in your snowflakes.

Speaking of oscillation, that is entirely controlled by the xPos property:

this.xPos += this.sign*this.speed*Math.cos(this.counter)/20;

Notice that the xPos property is incremented by a value that is the result of multiplying your sign, speed, and Math.cos function. Oh, and everything is divided by 20 to dampen the mood a bit!

How does this create the oscillation that you see? Every time your update function is called, the values for sign and speed stay constant. The only thing that changes is the value passed into your Math.cos function, the counter value. That is important because Math.cos is considered a periodic function where, no matter what values you put inside it, its value will always return a value between -1 and 1:

[ taken from the Trigonometric Animations tutorial ]

The oscillation is caused by your Math.cos function swaying between -1 and 1 as the value stored by the counter property changes.

The position of your snowflake as it falls is a lot simpler to explain:

this.yPos += this.speed/10;

The yPos property is incremented linearly by a constant value that is one-tenth the value of the speed property.

The xPos and yPos properties you saw earlier just store the values of what we want our horizontal and vertical positions of our snowflake to be. Actually setting the horizontal and vertical positions to the snowflake is handled by the following two lines:

// setting our snowflake's position
this.element.style.left = Math.round(this.xPos) + "px";
this.element.style.top = Math.round(this.yPos) + "px";

We set our element's left and top CSS properties to the rounded values of our xPos and yPos properties. Because this is CSS, we need to define the units of measurement as well. In our case, those will be pixels.

After these two lines have run, our snowflake's position will have updated to reflect the new xPos and yPos values. w00t.

The last thing we do inside our update function is make sure that our snowflake doesn't fall too far:

// if snowflake goes below the browser window, move it back to the top
if (this.yPos > browserHeight) {
}

If our snowflake's vertical position (represented by the yPos property) is larger than the height of the browser (as defined by browserHeight), then we just move this snowflake to the top by setting the value of yPos to a negative value.

The next time our update function runs, it will continue the movement with the new value for yPos.

This wraps up our coverage of the Snowflake class! What we have remaining are some helper functions that are easier to explain but are still equally important in making our effect work.

The SetPosition Function

In our code, for getting a number to help us place our snowflake, we made a call to a function called setPosition for both the X and Y positions:

function setPosition(offset, size) {
}

This function is pretty straightforward. It takes two arguments: offset, and size. It then returns a number that falls within a range that is altered on the high and low end by the offset value.

That may sound a bit confusing, so here is a diagram that illustrates it instead:

range of numbers

This is great because what want is an initial X and Y position for our snowflake that could potentially be a bit outside of the browser's window.

Dealing with Window Resizes

Our ability to place the snowflake in the right locations is based on us knowing what the size of the browser window is. If the browser's size were to change, we need to ensure our snowflakes' positions are still relevant.

The way we do this is by simply resetting the position of every snowflake on the screen after our browsers get resized. This is done by first listening for the resize event that gets fired when your browser is resized, and that is defined in our setup function:

function setup() {
}
setup();

When a resize event is fired, the resetPositions function gets called:

function resetPositions(e) {

}

This function goes through every Snowflake object stored in our snowflakes array and sets the xPos and yPos properties using the setPosition function.

That's all that is needed, for the next time the update function is called on each Snowflake object (once very 30 milliseconds!), the revised xPos and yPos values will ensure our snowflakes are positioned properly.

Knowing When the Tab Has Focus

The last thing we will look at may seem like an edge case, but I ran into it quite a few times when soliciting feedback on this effect from my friends.

Let's say someone opens your page containing this falling snow effect in a new background tab. This tab doesn't have focus, and it isn't even visible...because it is the background tab.

In this situation, our effect falls apart because we are relying on the browser window size to help us place the snowflakes. When a document is in the background, the browser's window size is simply not available, or depending on the browser, is sized at 0 pixels!

What we need to do is recalculate our window size when our tab containing our effect gets focus. This is done by listening for the focus event, calling a function when the focus event is heard, and then immediately removing the listener for that focus event.

Our code for listening to the focus event lives in our setup function as well:

function setup() {
}
setup();

When the focus event gets fired, the tabHasFocus event handler / function gets called:

function tabHasFocus(e) {
}

This function does two things. The first thing it does is make a call to our resetPositions function so that all of the snowflakes are properly positioned with the new browser width and height values taken into account.

The second thing is we remove the listener for this focus event. We do this because we don't want to reset the position when you give focus to some text, a form element, or whatever. Our need for doing this was to handle the case when this page will be opened in a background tab that doesn't have focus. Once we switch into the tab containing our document with the falling snow effect, we no longer need this event listener around. In case you were curious, if you switch to another tab and then return, everything still works!

Believe it or not, this was the last line of code from our example. Phew!

Modifying the Effect

What good is knowing how the code works if you can't modify it to suit your falling snow needs?! In this section, you'll learn how to make some common modifications to our code to alter the effect.

Changing the Snowflake Color

To change your snowflake color, simply modify the color property from your .snowflake CSS rule:

.snowflake {
}

This is the easiest way. If you are feeling adventurous, you can remove the CSS rule and change the color in JavaScript instead. I won't cover that here, but just know that you can do that if you want to be even more awesome and give each snowflake a random color!

Changing your Snowflake!

Right now, our snowflake is basically the asterisk character (*):

<div id="snowFlakeContainer">
<p class="snowflake">*</p>
</div>

That's pretty ghetto...even for this site's standards! If you want to use something else as your snowflake, all you have to do is change it:

<div id="snowFlakeContainer">
<img class="snowflake" src="images/snowflake.png"/>
</div>

For example, here I've replaced our p tag altogether with an img tag that shows an image of a snowflake instead.

If you plan on going custom, just keep the following two guidelines in mind:

Whatever element(s) you want to use your snowflake, make sure it has a class value of snowflake. If you have a deeply nested structure for your snowflake, just to add the snowflake value to the class attribute on the outermost element. You don't have to add it to everything.
For any elements you add, make sure they are the children of your snowFlakeContainer div.

Changing your Snowflake's Speed

Your snowflake's speed is controlled by the speed variable that is defined inside the GenerateSnowflakes function:

var initialXPos = setPosition(50, browserWidth);
var initialYPos = setPosition(50, browserHeight);
var speed = 5+Math.random()*40;
var radius = 4+Math.random()*10;

Right now, your speed can be a minimum of 5 or a maximum or 45. You can adjust the minimum and maximum values as you want to make your snowflake fall and oscillate faster or slower.

Changing Oscillation Speed

The rate at which your snowflakes oscillate left and right is tied to the speed variable, but you can adjust this independently without affecting how fast your snowflakes fall.

The property that you can adjust is the counter inside your update function found in your Snowflake class:

this.update = function () {

}

The counter property is used by your Math.cos function to create the oscillation. The counter property is being incremented by your speed value divided by 300. The smaller the rate at which you increment this property, the slower your oscillation. The higher the rate you increment the counter property, the faster the oscillation.

Conclusion
So...this is the falling snow effect recreated for a new era in HTML, CSS, and JavaScript. Like I mentioned in the example, this is my favorite effect to create and tutorial to write about it. Onwards to more interesting effects in the future.

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - please drop by our friendly forums and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use