Explication détaillée des exemples d'application de Particles.js dans la bibliothèque JS sur vue

Cet article présente principalement l'analyse de cas d'application de Particles.js dans la bibliothèque JS sur vue. Les amis qui en ont besoin peuvent s'y référer

L'effet d'animation de particules derrière la page d'accueil de Zhihu est toujours très cool , J'ai cherché et trouvé qu'il est écrit dans particules.js. Il se trouve que le projet actuel utilise le framework Vue, alors ils l'ont tous deux appris ensemble.

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

Page de connexion cool

Heehee~

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 sur 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.template

C'est là que seront les particules dynamiques affiché.

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

3.script

Parce qu'il s'agit de l'arbre dom, il doit être monté Initialisez particules.js après avoir 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 champ 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 si vous pensez que c'est difficile à gérer, il faut le mettre Dans le fichier principal, vous pouvez aussi

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

L'effet final est le suivant

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!