Snowfall effect for Vue js
npm install vsnow


Snowfall effect plugin for Vue js
You can watch the demo and play with the parameters on DEMO PAGE
This plugin requires Vue 2.X.
``sh`
npm install -S vsnow
> 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`
`html`
> Plugin will be installed automatically.
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" }]
//...
};
`html
:density="snowOptions.density"
:size="snowOptions.size"
:fall_speed="snowOptions.fall_speed"
:color="snowOptions.color"
:images="snowOptions.images"
:opacity="snowOptions.opacity"
/>
`
> 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
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.