V-Snow

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.

npm install -S vsnow

Initialization

ES2015 (Webpack/Rollup/Browserify/etc)

Global install

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

<template>
  <div >
    <!-- DIRECTIVE -->
    <div v-snow>
    </div>
    <!-- OR -->
    <VSnow>
  </div>
</template>
<script>
  import {VSnowDirective, VSnowContainer} from 'vsnow'

  export default {
    components: {
      VSnow: VSnowContainer
    },
    directives:{
      'snow' : VSnowDirective,
    }
  }
</script>

UMD (Browser)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vsnow/dist/vsnow.min.js"></script>

Plugin will be installed automatically.

SSR (NUXT)

plugins/VSnow.js

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

Vue.use(VSnow);

nuxt.config.js

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

🚀 Usage

<template>
  <!-- Directive -->
  <div v-snow="snowOptions"></div>

  <!-- Component -->
  <VSnow
    containerClass="myClass"
    :density="snowOptions.density"
    :size="snowOptions.size"
    :fall_speed="snowOptions.fall_speed"
    :color="snowOptions.color"
    :images="snowOptions.images"
    :opacity="snowOptions.opacity"
  />
</template>
<script>
  export default {
    data() {
      return {
        snowOptions: {
          density: 50,
          fall_speed: 4,
          size: 10,
          color: "#FFFFFF",
          opacity: 1,
          images: images
        }
      };
    }
  };
</script>

That's it 🤩

⚙️ 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 path`s	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.