Share
O mulțime de particule mici care se mișcă și interacționează unul cu celălalt sau cu voi au un anumit apel față de ele. Dacă vă aflați într-o situație în care trebuie să lucrați cu o mulțime de particule, Particles.js vă va servi bine. După cum reiese din nume, este o bibliotecă JavaScript care vă poate ajuta să creați sisteme de particule. În plus, este ușor, ușor de utilizat și vă oferă mult control.
În acest tutorial, voi acoperi toate caracteristicile bibliotecii și vă va ajuta să începeți. Acest tutorial este prima parte a seriei și va acoperi doar elementele de bază.
În primul rând, trebuie să găzduiți biblioteca. Puteți să-l încărcați pe propriul server sau să utilizați jsdeliver CDN ca mine.
De asemenea, trebuie să creați un element DOM unde Particles.js va crea particule. Dați-i ceva ușor de identificat id , pentru referire ulterioară.
Acum, pentru a crea un sistem de bază de particule cu setări implicite, aveți nevoie de o singură linie de JavaScript pentru a inițializa biblioteca.
particlesJS ();
Particulele sunt implicit albe. Ele sunt, de asemenea, interconectate cu linii albe subțiri. Deci, dacă nu vedeți nimic acum, schimbați fundalul cu altceva. Aici este CSS-ul meu pentru styling-ul particulei div:
# particule-js fundal: cornflowerblue;
Încercați să dați clic undeva în interiorul demo-ului de mai jos. După fiecare clic, Particles.js va genera încă patru particule noi.
Chiar dacă a fost nevoie de doar patru linii de cod pentru a crea demo-ul anterior, rezultatul final ar putea să nu fie ceea ce căutați. Pentru mine, particulele par a fi mai mici în dimensiune și ambalate dens. Poate doriți ca particulele să aibă o formă diferită sau să aibă dimensiuni aleatorii. Particles.js vă permite să setați toate aceste și multe alte proprietăți în JSON la care vă puteți referi în timpul inițializării. Sintaxa generală pentru a apela funcția va arăta astfel:
particuleJS (dom-id, path-json, callback (opțional));
Aici, dom-id este id-ul elementului în care doriți să apară particulele. cale-JSON este calea către fișierul JSON cu toate opțiunile de configurare și suna inapoi este o funcție de apel invers. În loc de o cale, puteți pune direct codul JSON în al doilea parametru.
Să încercăm să creăm zăpadă folosind această minunată bibliotecă. La început, funcția noastră va arăta astfel:
Accentsconagua
particule JS ("zăpadă", "active / snowflakes.json");Am eliminat funcția de apel invers și am schimbat DOM id-ul la un nume mai specific. Fulgi de zăpadă vor avea cea mai mare parte o formă sferică. Acestea vor cădea în jos și vor avea o dimensiune neuniformă. De asemenea, spre deosebire de prima demo, nu vor fi conectate prin linii.
La început, a noastră snowflakes.json fișierul va avea următorul cod:
"particule": , "interactivitate":
Toate opțiunile de configurare referitoare la proprietățile fizice, cum ar fi forma, dimensiunea și mișcarea vor intra în interior particule. Toate opțiunile de configurare care determină comportamentul de interacțiune vor intra în interior interactivitate.
Am stabilit numărul de particule la 100. Aceasta va depinde, în general, de spațiul disponibil. După cum am discutat anterior, voi seta și forma în cerc. În acest moment, fișierul ar trebui să arate astfel:
"particule": "număr": "valoare": 100, "formă": "tip": "cerc", "interactivitate":
Folosesc o valoare de 10 pentru a seta dimensiunea fulgilor de zăpadă. Deoarece fulgii de zăpadă variază în mărime, voi stabili întâmplător la Adevărat. În acest fel, fulgii de zăpadă pot avea orice dimensiune între zero și limita maximă pe care am specificat-o. Pentru a dezactiva sau a elimina toate liniile care leagă aceste particule împreună, puteți seta permite la fals pentru line_linked.
Pentru a muta particule în jur, va trebui să setați permite proprietate la Adevărat. Fără alte setări, particulele se vor mișca întâmplător, ca și cum ar fi în spațiu. Puteți seta direcția acestor particule cu o valoare de șir ca "fund". Chiar dacă mișcarea generală a particulelor este în jos, ei trebuie să se miște un pic aleator pentru a arăta natural. Acest lucru se poate realiza prin setarea drept la fals. In acest punct, snowflakes.json va avea următorul cod:
"numere": "valoare": 100, "formă": "tip": cerc, "dimensiune": "line_linked": "enable": false, "move": "enable": true, "speed"
Cu codul JSON de mai sus, veți obține următorul rezultat:
Dacă deplasați mouse-ul peste demo-ul de mai sus, veți observa că liniile există în continuare, dar apar doar temporar în timpul mutare. Pentru a le elimina complet, puteți seta permite proprietate pentru onhover eveniment la fals. Încercați să faceți clic în interiorul demonstrației de mai sus și veți observa că fiecare clic generează patru particule. Acesta este comportamentul implicit. De asemenea, puteți schimba numărul de particule folosind particles_nb proprietate în temeiul Apăsați. Am stabilit acest număr la 12 în acest caz.
De asemenea, puteți determina dacă doriți să detectați evenimentele de pe fereastră sau de panza utilizând detect_on opțiune.
Iată codul complet pentru fișierul JSON:
"numere": "valoare": 100, "formă": "tip": cerc, "dimensiune": "line_linked": "enable": false, "move": "enable": true, "speed" "detect_on": "canvas", "events": "onhover": "enable": false, "modes": "push": particles_nb "
După cum vedeți, nu trebuia să permit în mod special onclick eveniment. Este activat implicit. În mod similar, aș putea elimina și alte opțiuni "detect_on": "panza" sub interactivitate și "drept": fals sub mișcare. Le-am păstrat astfel încât începătorii să nu se confunde în legătură cu lucrurile de parcă particulele nu se mișcă în linii drepte.
Puteți încerca diferite valori pentru a modifica fulgii de zăpadă în acest demo CodePen.
Noțiuni de bază cu Particles.js este ușor. Dacă nu ați lucrat niciodată cu sisteme de particule înainte, această bibliotecă vă va face să începeți în cel mai scurt timp. Acest tutorial a fost doar o introducere de bază în bibliotecă. În următoarele două tutoriale din această serie, voi acoperi toate aspectele acestei biblioteci cu mult mai multe detalii.
Dacă aveți întrebări cu privire la acest tutorial, vă rugăm să ne anunțați în comentarii.
