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
- 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.
Dependencies & Browser Support
<head> but that’s not necessary if you instead put the code before the