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?
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.
Start the snow
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.