vsnow

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

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.