Comment utiliser la bibliothèque Particles.js dans vue

Cette fois, je vais vous montrer comment utiliser la bibliothèque Particles.js dans vue. Quelles sont les précautions pour utiliser la bibliothèque Particles.js dans vue. Voici des cas pratiques. un regard.

L'animation de particules au dos de la page d'accueil de Zhihu a toujours semblé sympa. Après l'avoir recherchée, j'ai découvert qu'elle était écrite en utilisant particules.js. Il se trouve que le projet actuel utilise le framework Vue, ils l'ont donc appris ensemble.

Pour être honnête, si cela est bien utilisé, la page peut être très cool, comme le projet que j'écris actuellement

Héhé~

Installer particules.js

npm install --save particles.js

Configurer particules.js

1.data

Ces données sont utilisées pour contrôler l'état des particules dans la 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.modèle

C'est ici que les particules dynamiques seront affichées.

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

3.script

L'arborescence DOM étant impliquée, particules.js doit être initialisé une fois le montage terminé. Le premier paramètre id est le nom d'identifiant que vous obtenez sur le modèle. Si je veux l'écrire, ce sont des particules. Le deuxième paramètre est le chemin où vos données sont stockées. Je recommande personnellement d'utiliser des chemins relatifs.

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%;
}

À ce stade, vous constaterez qu’il y a un point le plus important qui n’a pas été mentionné, eh bien, c’est l’introduction de particules.js. Lorsque votre périmètre d'utilisation est relativement petit, vous pouvez l'introduire directement dans le script du fichier vue actuel, c'est-à-dire

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

Ou peut-être pensez-vous que c'est difficile à gérer, vous devez donc le mettre dans le fichier principal

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation de Three.js

Explication détaillée de l'utilisation du cli angulaire

Explication détaillée des étapes de changement de page en plein écran pour le développement du plug-in Fullpage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!