For our recent holiday card project we wanted to create an experience with the website that mimicked the video that was the centerpiece of the project. While it was straightforward enough to use the same graphic style as the video we also wanted to include some of the same atmospheric effects as well like twinkling stars, moving fog, sparkles and, most importantly, snow. To create these we used CSS3 animations and transitions.
Making it Snow
In order to make it snow in our project I modified some CSS created by Estelle Weyl (@estellevw) for a SXSW talk she gave. The talk does a great job explaining the ins-and-outs of the CSS that gets used (e.g. animations, border-radius, timing) so I won't repeat that here. The main contribution I made, beyond tweaking the CSS some to have the snowflakes look the way I wanted, was to create an easy way with JavaScript to:
- randomly places N amount of snow across the web page
- randomly assign classes to each snowflake to randomize their look (e.g. size, speed, delay, opacity)
- properly detect the height of a web page when snowflakes are created and update the animation keyframe so they fall an appropriate distance instead of a "one size fits all"-style. Unfortunately,
window.onresizeis not accounted for.
You can view a demo of the CSS3 snowflakes in action. If you think it's interesting you can grab the code (CSS & JavaScript) on GitHub to use on your own site. Directions on how to get it snowing are in the README.
Dependencies & Browser Support
There aren't any real dependencies for this project other than browsers that support animations. This means this project can be used with Safari, Chrome, and FireFox. If the appropriate -ms- extensions were added it would probably work with Internet Explorer 10 as well. In the demo I use domReady to include the JavaScript in the <head> but that's not necessary if you instead put the code before the </body> tag.