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('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});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='particles.min.js'></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 区域散布密度大小 |