A vue.js particles animation background component
source link: https://github.com/lindelof/particles-bg-vue
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
particles-bg-vue
A vue.js particles animation background component
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
A React
version of particles-bg
is here https://github.com/lindelof/particles-bg
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 } }; }
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK