Maison >interface Web >js tutoriel >Bibliothèque JS Particles.js Manuel de développement chinois

Bibliothèque JS Particles.js Manuel de développement chinois

巴扎黑original: 2017-09-15 09:18:482529parcourir

Parce que j'ai besoin de fabriquer des produits, une bonne interface utilisateur est également très importante. J'ai trouvé que ce type d'effet spécial de diffusion de particules atomiques est plutôt bon. Aujourd'hui, l'éditeur de Script House a partagé le manuel de développement chinois de Particles.js et les paramètres de particules.js avec tout le monde. Les amis qui en ont besoin peuvent s'y référer

Parce que j'ai besoin de créer des produits, une bonne interface utilisateur est également. très important. , j'ai trouvé que ce type d'effet spécial de diffusion de particules atomiques est plutôt bon, alors j'ai créé un

github officiel : https://github.com/VincentGarreau/particles.js/

Créateur de démo, veuillez noter que vous aurez peut-être besoin de FQ

https://codepen.io/VincentGarreau/pen/pnlso Cela peut exporter la démo que vous avez réalisée

http://vincentgarreau.com /particles.js/Cela peut être utilisé pour essayer de configurer différents effets

Utilisation

Charger Particule.js et configurer les particules :

index.html

<p id="particles-js"></p>
<script src="particles.js"></script>

app.js

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load(&#39;particles-js&#39;, &#39;assets/particles.json&#39;, function() {
 console.log(&#39;callback - particles.js config loaded&#39;);
});

particles.json est le fichier de configuration principal

Faites attention à l'ordre des fichiers, sinon des problèmes peuvent survenir

Démo réelle

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 <title>particles.js</title>
  <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
<p id="particles-js"></p>
</body>
 <script src=&#39;particles.min.js&#39;></script> 这个玩意需要放在下面
 <script src="index.js"></script>
</html>

Télécharger si nécessaire Veuillez vous rendre sur le groupe QQ pour une démo L'effet atome noir est très science-fiction, pas mal

Selon la couleur css et le fichier de configuration json, vous pouvez créer votre. propre effet de science-fiction

Paramètres

Valeur clé	Options/description des paramètres	Instance
`<span style="color:#111111;font-family:NSimsun">particles.number.value</span>`	quantité numérique	`<span style="color:#111111;font-family:NSimsun">40</span>`
`<span style="color:#111111;font-family:NSimsun">particles.number.density.enable</span>`	booléen	`<span style="color:#111111;font-family:NSimsun">true</span>` / `<span style="color:#111111;font-family:NSimsun">faux</span>`
`particles.number.density.value_area<code style="padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px"><span style="color:#111111;font-family:NSimsun">particles.number.density.value_area</span>`	numéro 区域散布密度大小