UNPKG

3.82 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[![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```
36npm i magic-snowflakes --save-dev
37```
38or
39```
40yarn 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
56or
57
58```js
59'use strict';
60
61const Snowflakes = require('magic-snowflakes');
62Snowflakes();
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
93In 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```
105git clone git@github.com:hcodes/snowflakes.git ./snowflakes
106cd ./snowflakes
107
108npm i
109npm run build
110npm test
111
112open ./dev-examples/
113```
114
115## [License](LICENSE)
116MIT License