particles-bg-vue
A vue.js particles animation background component. Use it to make your website look cool.
React
https://github.com/lindelof/particles-bg
Check it out if you want to use it in 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
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