UNPKG

3.66 kBMarkdownView Raw
1Falling 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```
34npm i magic-snowflakes --save-dev
35```
36or
37```
38yarn 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
54or
55
56```js
57'use strict';
58
59const Snowflakes = require('magic-snowflakes');
60Snowflakes();
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
91In 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```
103git clone git@github.com:hcodes/snowflakes.git ./snowflakes
104cd ./snowflakes
105
106npm i
107npm run build
108npm test
109
110open ./dev-examples/
111```
112
113## [License](LICENSE)
114MIT License