A vue.js particles animation background component
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. Thanks to the great author.
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