❄️☃️🎄 [Falling snowflakes](https://hcodes.github.io/demo-snowflakes/)
==================
[](https://www.npmjs.com/package/magic-snowflakes)
[](https://www.npmjs.org/package/magic-snowflakes)
[](https://packagephobia.com/result?p=magic-snowflakes)
## Details
- Only one JavaScript file
- CSS Animation
- Rubber design
- Flexible settings
## [Examples](https://hcodes.github.io/demo-snowflakes/)
- 🔍 [Constructor](https://hcodes.github.io/snowflakes/examples/constructor): change settings and copy code for your site
- 🎲 [3D Cube](https://hcodes.github.io/snowflakes/examples/3d_cube.html)
- ❄ [Simple](https://hcodes.github.io/snowflakes/examples/simple.html)
- 🎨 [Multicolor](https://hcodes.github.io/snowflakes/examples/multicolor.html)
- 🐘 [Big](https://hcodes.github.io/snowflakes/examples/big.html)
- 🍋 [Blend mode](https://hcodes.github.io/snowflakes/examples/blend_mode.html)
- 🪟 [Layer](https://hcodes.github.io/snowflakes/examples/layer.html)
- 🏠 [Some layers](https://hcodes.github.io/snowflakes/examples/some_layers.html)
- 💛 [Own kind](https://hcodes.github.io/snowflakes/examples/balls.html)
- 🗻[Own z-index](https://hcodes.github.io/snowflakes/examples/z-index.html)
[See details](https://github.com/hcodes/snowflakes/tree/master/examples)
## Using
```
npm i magic-snowflakes --save-dev
```
### Without settings
Paste anywhere in your page's HTML:
```html
```
### With settings
```html
...
```
### Advanced settings
```html
```
### Typescript or ES6
```js
import Snowflakes from 'magic-snowflakes';
const snowflakes = new Snowflakes();
// ...
snowflakes.stop();
// ...
snowflakes.start();
// ...
snowflakes.destroy();
```
## API
```js
import Snowflakes from 'magic-snowflakes';
const snowflakes = new Snowflakes();
```
### .start()
Start CSS Animation.
### .stop()
Stop CSS Animation.
### .show()
Show snowflakes.
### .hide()
Hide snowflakes.
### .resize()
Resize snowflakes.
### .destroy()
Destroy the instance of snowflakes.
## Different Builds
In the `dist/` directory of [the NPM package](https://unpkg.com/magic-snowflakes/dist/) you will find many different builds of snowflakes.js.
|Type |Filename |Description |
|-----------------------|-------------------------|--------------------|
|Full (UMD) |`snowflakes.js` | |
|Full (UMD, production) |`snowflakes.min.js` | |
|Full auto |`snowflakes.auto.js` | Without API |
|Full auto (production) |`snowflakes.auto.min.js` | Without API |
|ES6 or Typescript |`snowflakes.esm.js` | |
|Light (UMD) |`snowflakes.light.js` | Without SVG images |
|Light (UMD, production)|`snowflakes.light.min.js`| Without SVG images |
## Development
```
git clone git@github.com:hcodes/snowflakes.git ./snowflakes
cd ./snowflakes
npm i
npm run build
npm test
open ./examples/
```
## [License](LICENSE)
MIT License
## Friends
- [Check device online](https://checkdevice.online/?from=github-snowflakes)