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

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

巴扎黑
Libérer: 2017-09-15 09:16:58
original
2145 Les gens l'ont consulté

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
}
Copier après la connexion

2.template

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


<p id="particles"></p>
Copier après la connexion

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(&#39;id&#39;,&#39;path to your particles.data&#39;);
}
Copier après la connexion

4.style


#particles{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
Copier après la connexion

À 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 &#39;particles.js&#39;
Copier après la connexion

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 &#39;particles.js&#39;
Vue.use(particles)
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal