Vue particle effects example sharing

This article mainly introduces to you the sample code of vue particle effects. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Achievement effect:

Yes, the points and lines you see in the picture above that are similar to the constellation diagram are made by vue- Particles are generated and can interact with user mouse events.

Portal: vue-particles

Usage tutorial

##

npm install vue-particles --save-dev

main.js file:

import Vue from 'vue' 
import VueParticles from 'vue-particles' 
Vue.use(VueParticles)

App.vue file – a simple example:

##

<template> 
  <p id="app">
   <vue-particles color="#dedede"></vue-particles>
  </p>
 </template>

App.vue file – a complete example :

<template> 
  <p id="app">
   <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>
  </p>
 </template>

Attributes:

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

Canvas realizes dazzling particle motion effects

threeJS realizes starry sky particles Moving effect example sharing

How to use canvas to create the effect of particle fountain animation

The above is the detailed content of Vue particle effects example sharing. For more information, please follow other related articles on the PHP Chinese website!