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
28 Oct 2, 2022
252 Nov 11, 2022
171 Dec 29, 2022
1.2k Jan 1, 2023
120 Dec 23, 2022
3 Dec 3, 2020
976 Dec 30, 2022
195 Dec 30, 2022