Particles.js implémente une animation d'arrière-plan dynamique de particules

Cette fois, je vais vous présenter Particles.js pour implémenter une animation d'arrière-plan dynamique de particules. Quelles sont les précautions pour que Particles.js implémente une animation d'arrière-plan dynamique de particules. Voici un cas pratique, jetons un coup d'œil. .

Processus de fonctionnement :

Il existe un processus de base sur Internet, vous pouvez vous y référer, mais s'il est utilisé directement sur la page de connexion, il y aura de petits bugs et devra être ajusté.

1. Introduisez d’abord le fichier particules.js dans la page.

<script src="js/particles.js"></script>

2. Utilisez un p dans la page comme conteneur pour placer les particules. [Habituellement placé en bas, le CSS est à améliorer]

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3. Charger le fichier de configuration  : selon Internet, si vous utilisez la méthode load(), vous devez obtenir un fichier json de configuration, et le chemin lumineux me rendra paralysé.

                                             Référez-vous à la démo officielle http://codepen.io/VincentGarreau/pen/pnlso

Ecrire la configuration directement en JS

<script type="text/javascript">
// particlesJS.load('particles', './js/app/particles.json', function() {
//  console.log('callback - particles.js config loaded');
// });
particlesJS("particles", {
 "particles": {
  "number": {
   "value": 30,
   "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": 10,
   "random": true,
   "anim": {
    "enable": false,
    "speed": 50,
    "size_min": 0.1,
    "sync": false
   }
  },
  "line_linked": {
   "enable": true,
   "distance": 300,
   "color": "#ffffff",
   "opacity": 0.4,
   "width": 2
  },
  "move": {
   "enable": true,
   "speed": 8,
   "direction": "none",
   "random": false,
   "straight": false,
   "out_mode": "out",
   "bounce": false,
   "attract": {
    "enable": false,
    "rotateX": 600,
    "rotateY": 1200
   }
  }
 },
 "interactivity": {
  "detect_on": "canvas",
  "events": {
   "onhover": {
    "enable": false,
    "mode": "repulse"
   },
   "onclick": {
    "enable": false,
    "mode": "push"
   },
   "resize": true
  },
  "modes": {
   "grab": {
    "distance": 800,
    "line_linked": {
     "opacity": 1
    }
   },
   "bubble": {
    "distance": 800,
    "size": 80,
    "duration": 2,
    "opacity": 0.8,
    "speed": 3
   },
   "repulse": {
    "distance": 400,
    "duration": 0.4
   },
   "push": {
    "particles_nb": 4
   },
   "remove": {
    "particles_nb": 2
   }
  }
 },
 "retina_detect": true
});
</script>

4. Configurez l'option de paramètre et utilisez : la page du site officiel de l'option github contient des détails. Contrôlez le nombre de particules, leur vitesse de déplacement, etc.

Il y a encore quelques problèmes lors de l'utilisation des particules. Après avoir téléchargé le fichier dans Chrome puis être passé à cette page, il est désactivé. Attendez une solution.

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 prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des méta-informations de routage de Vue-router

Comment utiliser les particules Bibliothèque .js dans vue Utiliser

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!