Maison > Article > interface Web > Explication détaillée de l'utilisation de ParticlesJS

Explication détaillée de l'utilisation de ParticlesJS

php中世界最好的语言original: 2018-04-17 16:53:453312parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de ParticlesJS. Quelles sont les précautions lors de l'utilisation de ParticlesJS. Voici des cas pratiques, jetons un coup d'oeil.

particules.js

Une bibliothèque JavaScript légère pour créer des particules.

Une bibliothèque JavaScript légère pour créer des arrière-plans de particules

Voici donc comment utiliser particules.js.

particulesJS est open source sur Github : https://github.com/VincentGarreau/particles.js

Une démo est fournie dans ce projet. Vous pouvez directement télécharger ce projet et ouvrir le fichier index.html dans la démo pour voir l'effet.

Alors, si nous voulons construire notre propre projet, comment importer les fichiers ?

Les suggestions sont les suivantes :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>particles.js</title>
 <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
 <meta name="author" content="Vincent Garreau" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <link rel="stylesheet" media="screen" href="css/style.css" rel="external nofollow" >
</head>
<body>
<p id="particles-js"></p>
<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
</body>
</html>

particules.js est sa bibliothèque, il faut l'importer, app.js est le paramètre fichier de configuration , il faut aussi l'importer, mais il n'est pas nécessaire d'importer stats.js dans la démo.

Nous pouvons également introduire style.css, la couleur de fond est définie en CSS.

Sur la base de ce modèle, nous pouvons ajouter les fonctions que nous souhaitons implémenter, telles que les fonctions d'enregistrement et de connexion. Ce qu'il faut noter est :
Utilisez p pour encapsuler le bloc de code fonctionnel que nous voulons implémenter, et définissez ce p dans. css Positionnement absolu.

Ce qui suit présente l'utilisation du fichier de configuration des paramètres app.js :

particules.number.value : Nombre de particules

particules.number.density : La densité des particules

particules.number.density.enable : Activer la densité des particules (vrai ou faux)

particules.number.density.value_area : L'espace occupé par chaque particule (disponible uniquement lorsque la densité des particules est activée)

particules.color.value : La couleur des particules (prend en charge l'hexadécimal "#b61924", rgb "{r:182, g:25, b:36}", hsl et aléatoire)

particules.shape.type : La forme des particules ("cercle" "bord" "triangle" "polygone" "étoile" "image")

particules.opacity.value : Transparence des particules

particules.size.anim.enable : s'il faut activer la vitesse des particules (vrai/faux)

particules.size.anim.speed： Fréquence d'animation des particules

particules.size.anim.sync : indique si la vitesse de course et l'animation des particules sont synchronisées

particules.move.speed : vitesse de déplacement des particules

Vous pouvez configurer votre arrière-plan préféré en fonction de ces fichiers de configuration. Deux fichiers de configuration complets app.js sont fournis ci-dessous.

Profil 1 (fond classique) :

{
 "particles": {
 "number": {
  "value": 80,
  "density": {
  "enable": true,
  "value_area": 800
  }
 },
 "color": {
  "value": "#ffffff"
 },
 "shape": {
  "type": "polygon",
  "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": 6,
  "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": true,
  "mode": "repulse"
  },
  "onclick": {
  "enable": true,
  "mode": "push"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "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": false
}

Fichier de configuration deux (fond de ciel étoilé) :

{
 "particles": {
 "number": {
  "value": 160,
  "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": 1,
  "random": true,
  "anim": {
  "enable": true,
  "speed": 1,
  "opacity_min": 0,
  "sync": false
  }
 },
 "size": {
  "value": 3,
  "random": true,
  "anim": {
  "enable": false,
  "speed": 4,
  "size_min": 0.3,
  "sync": false
  }
 },
 "line_linked": {
  "enable": false,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
 },
 "move": {
  "enable": true,
  "speed": 1,
  "direction": "none",
  "random": true,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 600
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "bubble"
  },
  "onclick": {
  "enable": true,
  "mode": "repulse"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "line_linked": {
   "opacity": 1
  }
  },
  "bubble": {
  "distance": 250,
  "size": 0,
  "duration": 2,
  "opacity": 0,
  "speed": 3
  },
  "repulse": {
  "distance": 400,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": true
}

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 :

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!

php JavaScript css html edge for 封装 JS number github https

Déclaration：

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

Article précédent：Générer des nombres basés sur la probabilitéArticle suivant：Générer des nombres basés sur la probabilité

Articles Liés

Voir plus