V-Snow


!alt text

Snowfall effect plugin for Vue js

👀 Demo

You can watch the demo and play with the parameters on DEMO PAGE

💾 Instalation

This plugin requires Vue 2.X.

``sh
npm install -S vsnow
`

Initialization

$3

> Global install

`javascript
import Vue from "vue";
import VSnow from "vsnow";

//Full install
Vue.use(VSnow);

// Or as a directive-only
import { VSnowDirective } from "vsnow";
Vue.directive("snow", VSnowDirective);

// Or only as a component
import { VSnowContainer } from "vsnow";
Vue.component("VSnow", VSnowContainer);
`

> Installation inside a component

`javascript


`

$3

`html


`

> Plugin will be installed automatically.

$3

plugins/VSnow.js

`js
import VSnow from "vsnow";
import Vue from "vue";

Vue.use(VSnow);
`

nuxt.config.js

`js
module.exports = {
//...
plugins: [{ src: "~/plugins/VSnow", mode: "client" }]
//...
};
`

🚀 Usage

`html


`

$3

⚙️ Configuration

> All parameters are optional and have default values

| Props | Description | Type | Default |
| -------------- | -------------------------------------------------------- | -------------------- | ------- |
| show | Determines whether the animation should be played or not | Boolean | true |
| zIndex | z-index of canvas | String | '999' |
| dencity | Count of flakes | Number from 0 to 100 | 50 |
| fall_speed | Snowflake falling speed | Number from 1 to 5 | 2 |
| size | Size of snowflake | Number | 10 |
| color | Color of snowflakes | String | #FFFFFF |
| images | Array of images paths | String[] | [] |
| opacity | Opacity of snowflakes | Number | 1 |
| containerClass | Class of component | String | '' |

> Notice: DENSITY Calculated from the screen width using the formula - (view_width/400) x density

👏 Contributing

I've more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.