particles-bg-vue

particles-bg-vue

A vue.js particles animation background component. Use it to make your website look cool.

Check it out if you want to use it in React https://github.com/lindelof/particles-bg

Specify

This project refers to the source code of the Proton official website, and proton's online demo. I packaged it into a vue.js component. You can use it casually in your own projects

Online demo

• demo1 https://codesandbox.io/s/particles-bg-vue-bg145
• demo2 https://codesandbox.io/s/particles-bg-vue-qc1b5
• custom https://codesandbox.io/s/particles-bg-vue-2fkvr

Install

npm install --save particles-bg-vue

Usage

Method 1: Import and use in the component

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

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

Method 2: Use it globally

import VueParticlesBg from "particles-bg-vue";

Vue.use(VueParticlesBg);

....
<particles-bg type="random" :bg="true" />

Parameter Description

<particles-bg color="#ff0000" num=200 type="circle" :bg={true} />

* type - Is the type of particle animation

Is the type of particle animation, random is a random selection. You are also free to customize use custom.

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

* num - The number of particles emitted each time, generally not set

* color - The background color or particle color of the particle scene

Notice: which should be an array under type=color

* canvas - canvas dom style

:canvas="canvasObject"
...

* bg - Set to html background

Is set the following properties

position: "absolute",
zIndex: -1,
top: 0,
left: 0

About Custom

You can use type="custom" to achieve a higher degree of freedom for the particle background.

  <particles-bg type="custom" :config="config" :bg="true"/>
  ...

  data: function() {
    return {
      config: {
        num: [4, 7],
        rps: 0.1,
        radius: [5, 40],
        life: [1.5, 3],
        v: [2, 3],
        tha: [-30, 30],
        body: icon,
        alpha: [0.6, 0],
        scale: [0.1, 0.4],
        position: "all",
        cross: "dead",
        random: 15
      }
    };
  }

Similar projects

Maybe you will like these two projects, they will also make your page flourish

• https://github.com/lindelof/react-mouse-particles
• https://github.com/lindelof/power-mode-input

License

https://opensource.org/licenses/MIT