Create Attractive Backgrounds Using Particle Animations – particles-bg-vue

Description:

A Vue.js component that provides 10+ particle animations for creating attractive backgrounds on the applications.

Particle Animations included:

  • color
  • ball
  • lines
  • thick
  • circle
  • cobweb
  • polygon
  • square
  • tadpole
  • fountain
  • random
  • custom

How to use it:

1. Install, import and register the component.

import { ParticlesBg } from "particles-bg-vue";
export default {
  name: "App",
  components: {
    ParticlesBg
  }
};

// or globally
import VueParticlesBg from "particles-bg-vue";
Vue.use(VueParticlesBg);

2. Insert the component into your template and specify the animation type you want to use.

<particles-bg type="lines" :bg="true" />

3. To create a custom particle animation, follow these steps:

<particles-bg type="custom" :config="config" :bg="true"/>
data: function() {
  return {
    config: {
      // configs here
    }
  };
}

4. Default props.

type: {
  type: String,
  required: false,
  default: "random"
},
num: [String, Number],
bg: Boolean,
color: String,
config: Object,
canvas: Object,
globalCompositeOperation: String

Preview:

Download Details:

Author: lindelof

Live Demo: https://codesandbox.io/s/particles-bg-vue-bg145

Download Link: https://github.com/lindelof/particles-bg-vue/archive/master.zip

Official Website: https://github.com/lindelof/particles-bg-vue

Last Update: December 4, 2019

Install:

# NPM
$ npm install particles-bg-vue --save

You Might Be Interested In:

Add Comment