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

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

php中世界最好的语言

Libérer： 2018-04-17 11:17:29

original

2892 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!