Share
Mange små partikler som beveger seg rundt og samhandler med hverandre eller med deg, har en viss appell til dem. Hvis du noen gang er i en situasjon der du må jobbe med mange partikler, vil Particles.js tjene deg godt. Som det fremgår av navnet, er det et JavaScript-bibliotek som kan hjelpe deg med å lage partikkelsystemer. Dessuten er den lett, enkel å bruke, og gir deg mye kontroll.
I denne veiledningen vil jeg dekke alle funksjonene i biblioteket og hjelpe deg med å komme i gang. Denne opplæringen er den første delen av serien og vil dekke bare grunnleggende.
Først må du være vert for biblioteket. Du kan enten laste den opp på din egen server eller bruke jsdeliver CDN som meg.
Du må også opprette et DOM-element der Particles.js vil lage partiklene. Gi det noen lett identifiserbare id , for referanse senere.
Nå, for å lage et grunnleggende system med partikler med standardinnstillinger, trenger du bare en enkelt linje med JavaScript for å initialisere biblioteket.
particlesJS ();
Partiklene er som standard hvite. De er også forbundet med tynne hvite linjer. Så, hvis du ikke ser noe akkurat nå, bare endre bakgrunnen til noe annet. Her er min CSS for styling av partikkelen div:
# partikler-js (bakgrunn: cornflowerblue;
Prøv å klikke et sted inne i demoen nedenfor. Etter hvert klikk, vil Particles.js generere fire nye partikler.
Selv om det tok bare fire kodelinjer for å lage den forrige demonstrasjonen, er sluttresultatet kanskje ikke det du leter etter. For meg synes partiklene å være litt større i størrelse og tett pakket. Kanskje du vil at partiklene skal ha en annen form eller ha en tilfeldig størrelse. Particles.js lar deg sette alle disse og mange flere egenskaper i JSON som du kan referere til under initialiseringen. Generell syntaks for å ringe funksjonen vil se ut som:
partiklerJS (dom-id, path-json, tilbakeringing (valgfritt));
Her, dom-id er elementets id hvor du vil at partiklene skal vises. sti-json er banen til JSON-filen med alle konfigurasjonsalternativer, og Ring tilbake er en valgfri tilbakeringingsfunksjon. I stedet for en bane kan du direkte sette JSON-koden i den andre parameteren.
La oss prøve å skape snøfall ved hjelp av dette fantastiske biblioteket. I begynnelsen vil vår funksjon se ut som:
Accentsconagua
partiklerJS ("snøfall", "eiendeler / snowflakes.json");Jeg har fjernet tilbakeringingsfunksjonen og endret DOM id til et mer spesifikt navn. Snøflakene vil mest ha en sfærisk form. De vil falle nedover og ha en ujevn størrelse. I motsetning til i vår første demo, vil de heller ikke være forbundet med linjer.
I begynnelsen vår snowflakes.json filen vil ha følgende kode:
"partikler": , "interaktivitet":
Alle våre konfigurasjonsalternativer relatert til fysiske egenskaper som form, størrelse og bevegelse vil gå inn partikler. Alle konfigurasjonsalternativene som bestemmer samspillets adferd, går inn interaktivitet.
Jeg setter antall partikler til 100. Dette vil generelt avhenge av ledig plass. Som tidligere diskutert, vil jeg også sette formen til sirkel. På dette tidspunktet skal filen se ut som:
"partikler": "tall": "verdi": 100, "form": "type": "sirkel", "interaktivitet":
Jeg bruker en verdi på 10 for å sette størrelsen på snøflak. Siden snøflakene varierer i størrelse, vil jeg stille tilfeldig til ekte. På denne måten kan snøfnuggene ha en hvilken som helst størrelse mellom null og den maksimale grensen som vi angav. For å deaktivere eller fjerne alle linjene som knytter disse partiklene sammen, kan du angi Aktiver til falsk til line_linked.
For å flytte partikler rundt, må du sette Aktiver eiendom til ekte. Uten noen annen innstilling, vil partiklene flytte tilfeldig som om de er i rommet. Du kan angi retningen av disse partiklene med en strengverdi som "bunn". Selv om den generelle bevegelsen av partikler er nedover, trenger de fortsatt å flytte litt tilfeldig for å se naturlig ut. Dette kan oppnås ved innstilling rett til falsk. På dette punktet, snowflakes.json vil ha følgende kode:
"tall": "tall": "verdi": 100, "form": "type": "sirkel", "størrelse": "verdi": 10, "tilfeldig": sant "line_linked": "enable": false, "move": "aktiver": true, "speed": 2, "retning": "bunn", "rett": falsk, "interaktivitet"
Med JSON-koden ovenfor får du følgende resultat:
Hvis du svinger over demoen ovenfor, vil du legge merke til at linjene fremdeles eksisterer, men bare dukker opp midlertidig under svever. For å fjerne dem helt, kan du stille inn Aktiver eiendom for onhover hendelse til falsk. Prøv å klikke inne i demoen ovenfor, og du vil legge merke til at hvert klikk genererer fire partikler. Dette er standard oppførsel. Du kan også endre antall partikler ved hjelp av particles_nb eiendom under trykk. Jeg har satt dette nummeret til 12 i dette tilfellet.
Du kan også bestemme om du vil oppdage hendelsene på vinduet eller lerretet ved hjelp av detect_on alternativ.
Her er den komplette koden for JSON-filen:
"tall": "tall": "verdi": 100, "form": "type": "sirkel", "størrelse": "verdi": 10, "tilfeldig": sant "line_linked": "enable": false, "move": "aktiver": true, "speed": 2, "retning": "bunn", "rett": falsk, "interaktivitet" "detect_on": "canvas", "events": "onhover": "aktiver": false, "moduser": "push": "particles_nb": 12
Som du kan se, måtte jeg ikke spesifikt aktivere ved trykk begivenhet. Den er aktivert som standard. Tilsvarende kunne jeg fjerne andre alternativer som "detect_on": "lerret" under interaktivitet og "rett": falsk under bevege seg. Jeg har holdt dem slik at forretter ikke blir forvirret om ting som hvorfor partiklene ikke beveger seg i rette linjer.
Du kan prøve forskjellige verdier for å endre snøfnuggene i denne CodePen-demoen.
Komme i gang med Particles.js er enkelt. Hvis du aldri har jobbet med partikkelsystemer før, vil dette biblioteket komme i gang på kort tid. Denne opplæringen var bare en grunnleggende introduksjon til biblioteket. I de neste to veiledningene i denne serien vil jeg dekke alle aspekter av dette biblioteket i mye mer detalj.
Hvis du har spørsmål angående denne opplæringen, vennligst gi meg beskjed i kommentarene.
