Share
Den forrige Particles.js-opplæringen diskuterte kortfattet ulike funksjoner som biblioteket tilbyr og hvordan man kommer i gang med biblioteket. I denne opplæringen vil jeg i detalj dekke alle aspekter av Particles.js som omhandler partikkelens fysiske utseende.
Det første vi skal håndtere er antall og tetthet av partikler. Tetthet bestemmer antall partikler som skal pakkes sammen i et gitt område. Den er aktivert som standard med value_area satt til 800. Her er JSON som lar deg kontrollere antall partikler:
"tall": "verdi": 50, "tetthet": "aktiver": true, "value_area": 500
Hvis du angir Aktiver under tetthet til falsk da vil antall partikler som vises vises nøyaktig 50. Dobling verdien av value_area vil redusere antall partikler omtrent halvparten.
Det er tre måter å sette partikkelens farger på. Du kan angi farger i HEX-format, RGB-format eller HSL-format. På grunn av en feil i biblioteket fungerer RGB- og HSL-format bare når du fjerner standardfargeverdien fra biblioteket.
Hvis du vil tilfeldig sette partikkelfarge, kan du gjøre det med verdien "tilfeldig". Til slutt, for å sette farge tilfeldig fra en liste med farger, må du gi fargene i HEX-format som en matrise. Her er JSON å sette farger for partikler:
"farge": "verdi": "#fff" // sett hvit i HEX (Vi bruker denne versjonen) "verdi": r: 255, g: 255, b: 255 // sett hvit i RGB " verdi:: ["# f00", "# 0f0", "# 00f"] // sett rødt, grønt og blå tilfeldig "verdi": "tilfeldig" // sett farger tilfeldig
Opacity-eiendommen gir deg mye kontroll. Du kan sette den til en eksakt verdi eller bruke tilfeldige verdier ved å sette inn "tilfeldig" til ekte. Ikke bare det, men du kan også animere partikkets opasitet. Her er JSON-koden for opasitetsegenskapen:
"opacity": "value": 1, "random": true, // Sett til false i vårt tilfelle "anim": "enable": true, "speed": 8, "opacity_min": 0.4, "synkronisering ": falsk
Innstilling "Sync" til ekte vil animere opaciteten av alle partikler på samme tid. Bruker en verdi på 0,4 for "Opacity_min" sørger for at opasiteten aldri går under 0,4 for noen partikkel under animasjon. Her er en demonstrasjon med stjerner som beveger seg over verdensrommet. Prøv å endre antall, farge eller opasitet av partikler for å se effekten.
Particles.js har fem forskjellige verdier for å lage grunnleggende former. En enkel form som sirkel genererer en sirkulær partikkel, triangel genererer trekantede partikler, og kant genererer firkanter. Du kan bruke verdien polygon å lage en nb_sides sidet polygon, hvor du gir verdien nb_sides. Hvis du vil opprette faktiske stjerneskjemaer, kan du sette formen til stjerne. De hjerneslag parameter legger til en oversikt over en gitt farge og bredde rundt alle partiklene. JSON-koden under vil opprette sekskanter.
"form": "type": "polygon", "slag": "bredde": 4, "farge": "#fff", "polygon": "nb_sides": 6
Det er også mulig å vise bilder i stedet for grunnleggende former. Først må du spesifisere formtype som bilde. Deretter kan du angi bildekilden og ønsket høyde og bredde. Det er verdt å huske på at bredde og høyde ikke bestemmer størrelsen på bildepartiklene, men deres størrelsesforhold. Her er noen JSON å lage partikler med asteroide bilder:
"form": "type": "bilde", "bilde": "src": "img / football.png", // Angi bildebane. "bredde": 1, // Bredde og høyde bestemmer ikke størrelse. "høyde": 1 // De bestemmer bare aspektforhold.
Biblioteket lar deg også blande flere former sammen. Du kan for eksempel bestemme deg for å lage sirkler, firkanter og sekskanter samtidig. I så fall er alt du trenger å gjøre, å passere en matrise med alle disse figurene.
"type": ["sirkel", "kant", "polygon"]
Størrelsesegenskapen har alle mulighetene for opacitetsegenskapen. Du kan angi størrelsen tilfeldig, samt animere størrelsen på individuelle partikler. Ta en nærmere titt på følgende JSON-kode.
"størrelse": "verdi": 25, "tilfeldig": sann, "anim": "aktiver": sann, "hastighet": 20, "size_min": 10, "synkronisering": falsk
Hvis du angir tilfeldig til falsk, alle partiklene vil være av størrelse 25. Når tilfeldig er satt til ekte, Størrelsen tjener som maksimal størrelse grense for partikler. Innstilling synkron til ekte inne animasjon vil endre størrelsen på alle elementene samtidig. Du bør åpne demoen og prøve forskjellige verdier for antall polygonsider, animasjoner og andre egenskaper for å se hvordan de påvirker sluttresultatet.
Når partikler er nært nok, kan du tegne tilkoblingslinjer mellom dem ved å aktivere line_linked eiendom.
Denne egenskapen har fire tilleggsverdier. De avstand eiendom angir maksimal avstand opp til hvilke linjer som skal trekkes. Du kan også stille inn farge som en HEX-streng. Opacity av linjer varierer basert på avstanden mellom partikler. Verdien du angir som opasitet er opaciteten av linjer når partikler er veldig tett sammen. Endelig, bredde bestemmer hvor bredt linjene dine skal være. Her er JSON-snippet for den medfølgende demoen.
"line_linked": "enable": true, "avstand": 200, "color": "#fff", "opacity": 1, "width"
Du kan se at linjene forsvinner så snart avstanden mellom partikler blir over 200 px.
Jeg har forsøkt å dekke alt som du trenger å vite for å endre formen, størrelsen, fargen og nesten alle andre fysiske egenskaper av partikler. Eksemplene i denne opplæringen illustrerer tydelig hvor lett det er å bruke dette biblioteket. Hvis du noen gang trenger et grunnleggende partikkelbibliotek, bør du definitivt gi Particles.js en prøve.
Den neste opplæringen vil lære deg hvordan du kontrollerer partikkelsens bevegelse og deres interaksjon mellom seg selv og med deg. Hvis du har spørsmål knyttet til denne opplæringen, vennligst legg igjen en kommentar.
Accentsconagua