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