1 | Falling snowflakes
|
2 | ==================
|
3 | [![NPM version](https://img.shields.io/npm/v/magic-snowflakes.svg)](https://www.npmjs.com/package/magic-snowflakes)
|
4 | [![NPM Downloads](https://img.shields.io/npm/dm/magic-snowflakes.svg?style=flat)](https://www.npmjs.org/package/magic-snowflakes)
|
5 | [![Dependency Status](https://img.shields.io/david/hcodes/snowflakes.svg)](https://david-dm.org/hcodes/snowflakes)
|
6 | [![Build Status](https://img.shields.io/travis/hcodes/snowflakes.svg?style=flat)](https://travis-ci.org/hcodes/snowflakes)
|
7 | [![Bundlephobia](https://badgen.net/bundlephobia/minzip/magic-snowflakes)](https://bundlephobia.com/result?p=magic-snowflakes)
|
8 |
|
9 |
|
10 | <img width="304" height="304" src="./promo/promo.gif" />
|
11 |
|
12 |
|
13 | ## Details
|
14 | - Only one JavaScript file (8 KB, GZIP)
|
15 | - CSS Animation
|
16 | - Rubber design
|
17 | - Flexible settings
|
18 |
|
19 | ## Examples
|
20 | - [Demo](https://hcodes.github.io/demo-snowflakes/)
|
21 | - [Simple](https://hcodes.github.io/snowflakes/examples/simple.html)
|
22 | - [Big](https://hcodes.github.io/snowflakes/examples/big.html)
|
23 | - [Increased speed](https://hcodes.github.io/snowflakes/examples/increased_speed.html)
|
24 | - [Layer](https://hcodes.github.io/snowflakes/examples/layer.html)
|
25 | - [Own color](https://hcodes.github.io/snowflakes/examples/color.html)
|
26 | - [Own kind](https://hcodes.github.io/snowflakes/examples/balls.html)
|
27 | - [Own z-index](https://hcodes.github.io/snowflakes/examples/z-index.html)
|
28 | - [start() and stop()](https://hcodes.github.io/snowflakes/examples/start_stop.html)
|
29 | - [Without wind](https://hcodes.github.io/snowflakes/examples/without_wind.html)
|
30 |
|
31 | [See details](https://github.com/hcodes/snowflakes/tree/master/examples)
|
32 |
|
33 | ## Using
|
34 |
|
35 | ```
|
36 | npm i magic-snowflakes --save-dev
|
37 | ```
|
38 | or
|
39 | ```
|
40 | yarn add magic-snowflakes
|
41 | ```
|
42 |
|
43 | ### Without settings
|
44 | ```html
|
45 | <html>
|
46 | <body>
|
47 | ...
|
48 | <script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
|
49 | <script>
|
50 | Snowflakes();
|
51 | </script>
|
52 | </body>
|
53 | </html>
|
54 | ```
|
55 |
|
56 | or
|
57 |
|
58 | ```js
|
59 | 'use strict';
|
60 |
|
61 | const Snowflakes = require('magic-snowflakes');
|
62 | Snowflakes();
|
63 | ```
|
64 |
|
65 | ### Advanced settings
|
66 | ```html
|
67 | <html>
|
68 | <body>
|
69 | <div id="snowflakes-container" style="width: 1000px; height: 500px;"></div>
|
70 | <script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
|
71 | <script>
|
72 | var sf = new Snowflakes({
|
73 | color: '#f00', // Default: "#5ECDEF"
|
74 | container: document.querySelector('#snowflakes-container'), // Default: document.body
|
75 | count: 100, // 100 snowflakes. Default: 50
|
76 | minOpacity: 0.1, // From 0 to 1. Default: 0.6
|
77 | maxOpacity: 0.95, // From 0 to 1. Default: 1
|
78 | minSize: 20, // Default: 8
|
79 | maxSize: 50, // Default: 18
|
80 | rotation: true, // Default: true
|
81 | speed: 2, // The property affects the speed of falling. Default: 1
|
82 | wind: false, // Without wind. Default: true
|
83 | width: 500, // Default: width of container
|
84 | height: 250, // Default: height of container
|
85 | zIndex: 100 // Default: 9999
|
86 | });
|
87 | </script>
|
88 | </body>
|
89 | </html>
|
90 | ```
|
91 |
|
92 | ## Different Builds
|
93 | In the `dist/` directory of [the NPM package](https://unpkg.com/magic-snowflakes/dist/) you will find many different builds of snowflakes.js.
|
94 |
|
95 | |Type |Filename |Description |
|
96 | |-----------------------|-------------------------|------------------|
|
97 | |Full (UMD) |`snowflakes.js` | |
|
98 | |Full (UMD, production) |`snowflakes.min.js` | |
|
99 | |Light (UMD) |`snowflakes.light.js` |Without SVG images|
|
100 | |Light (UMD, production)|`snowflakes.light.min.js`|Without SVG images|
|
101 |
|
102 |
|
103 | ## Development
|
104 | ```
|
105 | git clone git@github.com:hcodes/snowflakes.git ./snowflakes
|
106 | cd ./snowflakes
|
107 |
|
108 | npm i
|
109 | npm run build
|
110 | npm test
|
111 |
|
112 | open ./dev-examples/
|
113 | ```
|
114 |
|
115 | ## [License](LICENSE)
|
116 | MIT License
|