Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hcodes/snowflakes
❄️ Falling snowflakes
https://github.com/hcodes/snowflakes
christmas css fullscreen happy-new-year js snowflake
Last synced: 5 days ago
JSON representation
❄️ Falling snowflakes
- Host: GitHub
- URL: https://github.com/hcodes/snowflakes
- Owner: hcodes
- License: mit
- Created: 2015-12-27T07:57:28.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-10-22T22:10:11.000Z (19 days ago)
- Last Synced: 2024-10-23T11:16:49.582Z (18 days ago)
- Topics: christmas, css, fullscreen, happy-new-year, js, snowflake
- Language: TypeScript
- Homepage: https://hcodes.github.io/demo-snowflakes/
- Size: 2.23 MB
- Stars: 354
- Watchers: 6
- Forks: 55
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
❄️☃️🎄 [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
- ❄ [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)
- 🪟 [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
...
new Snowflakes({
wind: false,
rotation: false
});
```
### Advanced settings
```html
#snowflakes-container {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
}
var snowflakes = new Snowflakes({
color: '#f00', // Default: "#5ECDEF"
container: document.querySelector('#snowflakes-container'), // Default: document.body
count: 100, // 100 snowflakes. Default: 50
minOpacity: 0.1, // From 0 to 1. Default: 0.6
maxOpacity: 0.95, // From 0 to 1. Default: 1
minSize: 20, // Default: 10
maxSize: 50, // Default: 25
rotation: true, // Default: true
speed: 2, // The property affects the speed of falling. Default: 1
wind: false, // Without wind. Default: true
width: 500, // Default: width of container
height: 250, // Default: height of container
zIndex: 100, // Default: 9999,
autoResize: true // Default: true
});
```
### 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 [email protected]:hcodes/snowflakes.git ./snowflakes
cd ./snowflakes
npm i
npm run build
npm test
open ./examples/
```
## [License](LICENSE)
MIT License