În acest tutorial, o să vorbesc despre particulele. O bibliotecă JavaScript care vă permite să creați un efect dinamic al particulelor pe site-ul dvs. web. Puteți personaliza dimensiunea, viteza, comportamentul mișcării și multe altele cu particulele. Aici este pagina demonstrației particulelor.js care vă permite să încercați mai multe setări și să vedeți cum funcționează cu adevărat.
Pregătiți mediul de lucru
Odată ce ați jucat cu demo, este timpul de implementare. Să începem prin descărcarea celei mai recente versiuni a lui GitHub și să o importăm pe pagina dvs. HTML utilizând eticheta Script.
Următor următor, creați un fișier de configurare JSON. Aici puteți personaliza opțiunea. Voi folosi configurația de bază furnizată în GitHub, care ar trebui să fie o particule bune de pornire, cum ar fi dimensiunea, densitatea, mișcarea, culoarea etc.
Voi schimba, de asemenea, culoarea puțin de când partea de jos a paginii este albă.
{ "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#fdefaa" },
următor, creați un element div doriți să utilizați ca o ambalare a particulelor cu lățimea și înălțimea corespunzătoare. Voi crea un buton pentru a porni efectul de particule atunci când faceți clic pe.
<div></div><button>Start</button>#particle-div { margin: 0 auto; width:800px; height:500px;}
În cadrul evenimentului de clic, putem porni modulele metodelor de încărcare și ID-ul elementului de container pe care tocmai l-am creat, urmat de numele fișierului de configurare JSON.
$("#particle-button").click(function(){ particlesJS.load('particle-div','particle-cfg.json'); });
și asta este, este gata să plece. Să vedem cum funcționează!
Schimbarea opțiunii Dinamic
poate face și o schimbare în opțiunea de particule în zbor. Vom crea un buton de actualizare.
<button>Update</button>
în interiorul driverului evenimentului de clic, vă putem referi la matricea obiectului Module.js și să efectuez modificări în configurație ca aceasta. Puteți vedea lista completă a acestor setări în GitHub. După ce ați terminat cu actualizările, apelați metoda de actualizare a particulelor pentru a colecta modificarea.
$("#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(); });
și aici este atunci când faceți clic pe butonul de actualizare.
Puteți să le vedeți în acțiune în următorul videoclip:
cod sursă
<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;}