https://github.com/fiveisprime/css-snow
CSS keyframes animations to make some snow on a web page. Includes some JavaScript to add snow to the page on load.
https://github.com/fiveisprime/css-snow
Last synced: about 1 year ago
JSON representation
CSS keyframes animations to make some snow on a web page. Includes some JavaScript to add snow to the page on load.
- Host: GitHub
- URL: https://github.com/fiveisprime/css-snow
- Owner: fiveisprime
- Created: 2012-10-03T19:18:18.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2012-12-26T03:11:49.000Z (over 13 years ago)
- Last Synced: 2025-03-30T08:07:36.075Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://fiveisprime.github.com/css-snow/
- Size: 117 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# CSS Snow
Uses CSS3 keyframes animations to create a snow effect - the JavaScript library adds snow elements and updates the
keyframes animation to use the full page.
Inspired by [Dave Olsen](https://github.com/dmolsen/CSS3-Snowflakes) and [Elizabeth Yalkut](https://github.com/elizabethyalkut/CSS3-Snowflakes). I basically took what Dave had and cleaned up the CSS and JavaScript so that I could use it for a project and I figured I would share.
## Getting Started
The CSS is what makes the snow work and the JavaScript is supplemental so you might need to add some specific IDs if you want to use the included `snow.css` stylesheet.
Include the references:
````html
````
Make sure that you have a container with an ID that can be used as the page container. This is where
the snow will be populated and how the keyframes animation determines height.
Add a `div` for the snow:
````html
````
Add the desired amount of snow using JavaScript (note that keyframes animations are pretty CPU intensive and might make you sad).
````javascript
snow.addSnow('container','snow-container', 40);
````