Detailed explanation of application examples of Particles.js in JS library on vue

This article mainly introduces the application case analysis of Particles.js in the JS library on vue. Friends who need it can refer to it

The particle animation effect behind the homepage of Zhihu always feels very cool , I searched and found that it is written in particles.js. It just so happens that the current project uses the Vue framework, so the two of them learned it together.

To be honest, if this is used well, the page can be very cool, for example, the project I am writing now

Cool login page

heehee~

Install particles.js

npm install --save particles.js

Configuration particles.js

##1.data

This data is used to control the state of particles on the page .

{
"particles": {
 "number": {
 "value": 60,
 "density": {
  "enable": true,
  "value_area": 800
 }
 },
 "color": {
 "value": "#ffffff"
 },
 "shape": {
 "type": "circle",
 "stroke": {
  "width": 0,
  "color": "#000000"
 },
 "polygon": {
  "nb_sides": 5
 },
 "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
 }
 },
 "opacity": {
 "value": 0.5,
 "random": false,
 "anim": {
  "enable": false,
  "speed": 1,
  "opacity_min": 0.1,
  "sync": false
 }
 },
 "size": {
 "value": 3,
 "random": true,
 "anim": {
  "enable": false,
  "speed": 40,
  "size_min": 0.1,
  "sync": false
 }
 },
 "line_linked": {
 "enable": true,
 "distance": 150,
 "color": "#ffffff",
 "opacity": 0.4,
 "width": 1
 },
 "move": {
 "enable": true,
 "speed": 4,
 "direction": "none",
 "random": false,
 "straight": false,
 "out_mode": "out",
 "bounce": false,
 "attract": {
  "enable": false,
  "rotateX": 100,
  "rotateY": 1200
 }
 }
},
"interactivity": {
 "detect_on": "Window",
 "events": {
 "onhover": {
  "enable": true,
  "mode": "grab"
 },
 "onclick": {
  "enable": true,
  "mode": "push"
 },
 "resize": true
 },
 "modes": {
 "grab": {
  "distance": 140,
  "line_linked": {
  "opacity": 1
  }
 },
 "bubble": {
  "distance": 400,
  "size": 40,
  "duration": 2,
  "opacity": 8,
  "speed": 3
 },
 "repulse": {
  "distance": 200,
  "duration": 0.4
 },
 "push": {
  "particles_nb": 4
 },
 "remove": {
  "particles_nb": 2
 }
 }
},
"retina_detect": true
}

2.template

This is where the dynamic particles will be displayed.

<p id="particles"></p>

3.script

Because it involves the dom tree, it must be mounted after the Initialize particles.js. The first parameter id is the id name you get on the template. If I want to write it, it is particles. The second parameter is the path where your data is stored. I personally recommend using relative paths.

mounted(){
 particlesJS.load('id','path to your particles.data');
}

4.style

##

#particles{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

At this point, you will find that there is one most important point that has not been mentioned, well, that is the introduction of particles.js. When your usage scope is relatively small, you can directly introduce it into the script of the current vue file, that is,

//vue文件
import particles from 'particles.js'

. Or if you think this is difficult to manage, you must put it in the main You can also

//main文件
import particles from 'particles.js'
Vue.use(particles)

in the file. The final effect is as follows

The above is the detailed content of Detailed explanation of application examples of Particles.js in JS library on vue. For more information, please follow other related articles on the PHP Chinese website!