Vue-particle effects (vue-particles)

1. Background particle effects

https://vue-particles.netlify.app/

It is a background picture + particle special effect combination

 

2、main.js

import VueParticles from 'vue-particles'

Vue.use(VueParticles)

　　

 

3. Use on the page

<vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
     hoverMode="grab"
     :clickEffect="true"
     clickMode="push"
   >
</vue-particles>

4. All parameters

color: String type. The default is '#dedede'. Particle color.
particleOpacity: Number type. The default is 0.7. Particle transparency.
particlesNumber: Number type. The default is 80. The number of particles.
shapeType: String type. The default is 'circle'. The available particle appearance types are: "circle", "edge", "triangle", "polygon", "star".
particleSize: Number type. The default is 80. Single particle size.
linesColor: String type. The default is '#dedede'. Line color.
linesWidth: Number type. Default 1. Line width.
lineLinked: Boolean type. The default is true. Whether the cable is available.
lineOpacity: Number type. The default is 0.4. Line transparency.
linesDistance: Number type. The default is 150. Line distance.
moveSpeed: Number type. Default 3. Particle movement speed.
hoverEffect: Boolean type. The default is true. Is there any hover effect.
hoverMode: String type. The default is true. Available hover modes are: "grab", "repulse", "bubble".
clickEffect: Boolean type. The default is true. Is there a click effect. clickMode: String type. The default is true. Available click modes are: "push", "remove", "repulse", "bubble".