ngx-snowf

Snowfall component for Angular2+ -- Let it snow on your page! ❄

Install

npm:

npm install ngx-snowf --save

Usage

add SnowfModule to NgModule

import { SnowfModule } from 'ngx-snowf';

@NgModule({
    imports: [
        SnowfModule
    ]
})

use snowf component in template

<Snowf
  [amount]="50"
  [size]="5"
  [speed]="1.5"
  [wind]="0"
  [color]="'#fff'"
  [opacity]="0.8"
  [swing]="1"
  [image]=""
  [zIndex]=""
/>

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 (use snowf with Vanilla JS)

react-snowf (use snowf with React)

vue-snowf (use snowf with Vue)

Licence

ngx-snowf is open source and released under the MIT Licence.

Copyright (c) 2017 Fuxy526