Make it snow! CSS3 animated snowflakes tutorial

Posted by on Nov 15, 2014 in Tutorial | No Comments
Make it snow! CSS3 animated snowflakes tutorial

The brief

I was asked to add a festive touch across a range of client sites by adding a falling snow effect in the background of the pages.
To do this in a stylish, un-obtrusive and efficient way was the challenge in hand.

JS OR CSS3?

The first big decision was whether to use javascript or CSS3 to accomplish the animations. After some initial experiments with JS libraries I decided to go with a CSS3 solution using keyframe animations. The only drawback of this technique being that it wouldn’t be supported in older browsers, but because this wasn’t an essential page component it was decided that a graceful fallback would be sufficient.

Finding the flakes

To begin with I worked with some PNG graphics or snowflakes, but I discovered that the Veneer web font which was already being used on the site had a subset of extended symbols including some lovely looking snowflakes.
SO each of the flakes you see falling down the screen is actually a “U” or a “T” which renders in the VeneerExtras font as one of two different flake designs.

Snow is falling

Each snowflake consists of two animated elements. There is the span with a class of “snowflake” which uses the “snow-vg” keyframe animation to move it from the top of the screen to the bottom over the course of 30 seconds.
Then, within each span I create a pseudo element which holds either a T or a U. This pseudo element uses the snow-hz keyframe animation to move left to right and back within its span.

screenshot

Start the snow

I have some javascript which waits for the page to be loaded, then creates the required number of snowflakes with random sizes, colours and positions within the parameters it is given.

Snow gutters

The script which positions the snow does some calculations to work out where the gutters are on the left and right of the main page content and attempts to disperse the snow in to those gutters.

Deep and crisp and even

The JS object which creates the snow has a number of parameters which control the size, speed and density of snow so you can easily tweak the feel of the snowstorm on each page.

Merry Christmas to all and to all a good night

Feel free to modify and reuse this code however you like, but I’d appreciate if you’d credit me in the source if you’re using it on a project.

View the demo

Leave a Reply