This is a simple demo of CSS3-based snowflakes. It is based on the work of Estelle Weyl (@estellevw). These snowflakes are dynamically created on page load and several effects (e.g. opacity, size, speed) are randomly added to each snowflake. The code is available on GitHub.
This demo should support Safari, Chrome, and Firefox.
If you decide you want to initialize the snowflakes in your <head>
tag then you'll need to use a simple
library to tell you when the DOM is ready like domReady. domReady is
included and used in the distribution.
If you would like to use CSS3 Snowflakes on your own site (and who wouldn't?) simply include snowflakes.js
and
snowflakes.css
in your project. Modify snowflakes.js
to include the proper references to the <div>
that marks the overall container for your content as well as the <div>
from which your snowflakes will fall. Then simply add:
var snowflakes = new Snowflakes(pageContentDiv,snowflakesHolderDiv);
snowflakes.create(someNumber);
to your page to generate the snowflakes.
You can always add more snow to this page to create a blizzard. Or remove some snow if you think it's too much.