How to use Particles.js library in vue

This time I will show you how to use the Particles.js library in vue. What are the precautions for using the Particles.js library in vue. The following is a practical case. Let’s take a look. one time.

The particle animation on the back of Zhihu’s homepage always seemed cool. After searching it, I found that it was written using 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, such as the project I am writing now

Hee hee~

Install particles.js

npm install --save particles.js

Configuration particles.js

1.data

This data is used to control the state of particles in 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></p>

3.script

Because the DOM tree is involved, particles.js must be initialized after the mounting is completed. 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 maybe you think this is difficult to manage, so you must put it in the main file.

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of Three.js

Detailed explanation of the use of angular cli

Fullpage plug-in development full screen page turning steps detailed explanation

The above is the detailed content of How to use Particles.js library in vue. For more information, please follow other related articles on the PHP Chinese website!