https://github.com/fuxy526/ngx-snowf
Snowfall component for Angular2+ -- Let it snow on your page! ❄ demo: https://fuxy526.github.io/snowf/
https://github.com/fuxy526/ngx-snowf
angular snow snowf snowfall snowflake
Last synced: about 2 months ago
JSON representation
Snowfall component for Angular2+ -- Let it snow on your page! ❄ demo: https://fuxy526.github.io/snowf/
- Host: GitHub
- URL: https://github.com/fuxy526/ngx-snowf
- Owner: Fuxy526
- License: mit
- Created: 2017-12-18T06:34:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-25T15:17:52.000Z (over 8 years ago)
- Last Synced: 2025-06-24T03:47:28.088Z (12 months ago)
- Topics: angular, snow, snowf, snowfall, snowflake
- Language: TypeScript
- Homepage:
- Size: 236 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-snowf
> Snowfall component for Angular2+ -- Let it snow on your page! ❄
### Install
#### [npm](https://www.npmjs.com/package/ngx-snowf):
```bash
npm install ngx-snowf --save
```
### Usage
add SnowfModule to NgModule
```javascript
import { SnowfModule } from 'ngx-snowf';
@NgModule({
imports: [
SnowfModule
]
})
```
use snowf component in template
```html
```
### Default Options
Argument | Type | Default Value | Description
:---: | :---: | :---: | ---
**amount** | *Number* | *50* | Number of snowflakes displayed at a time.
**size** | *Number* | *5* | Size of snowflakes.
**speed** | *Number* | *1.5* | Vertical speed of snowflakes. The larger, the snowflakes drop faster.
**wind** | *Number* | *0* | Horizontal wind power. Wind will blow right if this is a positive number, and a negative number makes wind blow left.
**color** | *String* | *'#fff'* | Color of snowflakes. This option accepts HEX or RGB color code, such as "#fff", "#ffffff", "rgb(255,255,255)".
**opacity** | *Number* | *0.8* | The max opacity of snowflakes. The plugin will generate snowflakes with different opacity from 0 to this number.
**swing** | *Number* | *1* | Swing offset of snowflakes. If you don't want them to swing, set this option as 0.
**image** | *String* | *null* | Set this option to replace the snowflake with your image.
**zIndex** | *Number* | *null* | Position of the canvas layer. Set the layer front or back by changing this value.
### Others
#### [snowf](https://github.com/Fuxy526/snowf.git) (use snowf with Vanilla JS)
#### [react-snowf](https://github.com/Fuxy526/react-snowf.git) (use snowf with React)
#### [vue-snowf](https://github.com/Fuxy526/vue-snowf.git) (use snowf with Vue)
### Licence
ngx-snowf is open source and released under the MIT Licence.
Copyright (c) 2017 Fuxy526