dans ce didacticiel, je vais parler des particules.js. Une bibliothĂšque JavaScript qui vous permet de crĂ©er un effet de particules dynamique sur votre site Web. Vous pouvez personnaliser la taille, la vitesse, le comportement du mouvement et bien plus encore avec des particules.js. Voici la page de dĂ©monstration des particules qui vous permet d’essayer plusieurs paramĂštres et de voir comment cela fonctionne vraiment.
PrĂ©parer l’environnement de travail
Une fois que vous avez jouĂ© avec la dĂ©mo, il est temps de mise en Ćuvre. Commençons par tĂ©lĂ©charger la derniĂšre version de Github et l’importait sur votre page HTML Ă l’aide de la balise de script.
Suivant, crĂ©ez un fichier JSON de configuration. C’est lĂ que vous pouvez personnaliser l’option de. Je vais utiliser la configuration de base fournie dans le GitHub, qui devrait ĂȘtre une bonne particules de dĂ©marrage, telles que la taille, la densitĂ©, le mouvement, la couleur, etc.
Je changerai Ă©galement la couleur un peu puisque le bas de la page est blanc.
{ "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#fdefaa" },
Suivant, crĂ©ez un Ă©lĂ©ment div Voulez-vous utiliser comme emballage de particules avec la largeur et la hauteur appropriĂ©es. Je crĂ©erai Ă©galement un bouton pour lancer l’effet de particules lorsque vous cliquez sur.
<
<div></div><button>Start</button>#particle-div { margin: 0 auto; width:800px; height:500px;}
Dans l’Ă©vĂ©nement de clic, nous pouvons dĂ©marrer les modules de la mĂ©thode de chargement.js et fournir L’ID de l’Ă©lĂ©ment de conteneur que nous venons de crĂ©er, suivi du nom du fichier de configuration JSON.
$("#particle-button").click(function(){ particlesJS.load('particle-div','particle-cfg.json'); });
Et c’est prĂȘt Ă partir. Voyons comment ça marche!
Modifier l’option de maniĂšre dynamique
peut aussi faire une modification de la option de particules à la volée. Nous allons créer un bouton de mise à jour.
<button>Update</button>
Ă l’intĂ©rieur du pilote d’Ă©vĂ©nement clic, nous pouvons vous rĂ©fĂ©rer Ă la matrice d’objet Modules.js et apporter des modifications dans la configuration comme ça. Vous pouvez voir la liste complĂšte de ces paramĂštres dans le GitHub. Lorsque vous avez terminĂ© avec les mises Ă jour, appelez la mĂ©thode de mise Ă jour des particules pour collecter le changement.
$("#update-button").click(function(){ window.pJSDom.pJS.particles.number.value = 200; window.pJSDom.pJS.particles.color.value = "#dccaff"; window.pJSDom.pJS.tmp.obj.size_value = 80; window.pJSDom.pJS.fn.particlesRefresh(); });
et voici lorsque vous cliquez sur le bouton de mise Ă jour.
Vous pouvez les voir en action dans la vidéo suivante:
code source
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="jquery-2.1.4.js"></script> <script src="particles.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div><span>Particles.js</span></div> <div> <div></div> <button>Start</button> <button>Update</button> </div> <script> $("#particle-button").click(function(){ particlesJS.load('particle-div','particle-cfg.json'); }); $("#update-button").click(function(){ window.pJSDom.pJS.particles.number.value = 200; window.pJSDom.pJS.particles.color.value = "#dccaff"; window.pJSDom.pJS.tmp.obj.size_value = 80; window.pJSDom.pJS.fn.particlesRefresh(); }); </script> </body></html>#particle-div { margin: 0 auto; width:800px; height:500px;}