https://github.com/trevanhetzel/let-it-snow
A pure CSS approach to making it snow on your website
https://github.com/trevanhetzel/let-it-snow
Last synced: 7 months ago
JSON representation
A pure CSS approach to making it snow on your website
- Host: GitHub
- URL: https://github.com/trevanhetzel/let-it-snow
- Owner: trevanhetzel
- License: mit
- Created: 2014-11-20T16:25:51.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-11-24T03:41:29.000Z (over 11 years ago)
- Last Synced: 2024-04-16T22:27:32.136Z (about 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 262 KB
- Stars: 6
- Watchers: 5
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
let-it-snow
===========
### [View demo](http://trevanhetzel.github.io/let-it-snow)
This is a little experiment on creating CSS snowflakes that stick/collect to elements. The collection of snowflakes is not the most realistic it could be but, hey, the logic is there!
*Disclaimer*: the JavaScript is really just an experiment and I can't vouch for the performance of it. While it doesn't noticeably slow down a page, there's a little callback hell that could definitely be cleaned up. This is only my attempt at the getting the logic down :)
### Instantiation
```
$.letItSnow('.let-it-snow', {
stickyFlakes: 'lis-flake--js',
makeFlakes: true,
sticky: true
});
```
### Usage
You can definitely use just the CSS for some nice snowflakes. To do so, you can either create a bunch (100 is what I use) of elements on your page with the class name `.lis-flake` (``) OR use the JavaScript plugin to create them for you by setting the `sticky` property to `false`.