Share
Många små partiklar rör sig runt och interagerar med varandra eller med dig har en viss vädjan till dem. Om du någonsin befinner dig i en situation där du behöver arbeta med mycket partiklar, kommer Particles.js att tjäna dig bra. Som det framgår av namnet, är det ett JavaScript-bibliotek som kan hjälpa dig att skapa partikelsystem. Dessutom är det lätt, lätt att använda och ger dig mycket kontroll.
I den här handledningen kommer jag att täcka alla funktioner i biblioteket och hjälpa dig att komma igång. Denna handledning är den första delen av serien och kommer att täcka bara grunderna.
Först måste du vara värd för biblioteket. Du kan antingen ladda upp den på din egen server eller använda jsdeliver CDN som jag.
Du måste också skapa ett DOM-element där Particles.js kommer att skapa partiklarna. Ge det lite lätt identifierbart id , för referens senare.
Nu, för att skapa ett grundläggande system med partiklar med standardinställningar behöver du bara en enda rad JavaScript för att initiera biblioteket.
particlesJS ();
Partiklarna är som standard vita. De är också sammankopplade med tunna vita linjer. Så, om du inte ser någonting just nu, ändra bara bakgrunden till något annat. Här är min CSS för styling av partikeln div:
# partiklar-js (bakgrund: cornflowerblue;
Försök klicka någonstans inom demo nedan. Efter varje klick kommer Particles.js att generera fyra nya partiklar.
Även om det bara tog fyra linjer kod för att skapa tidigare demo, kanske slutresultatet inte är det du letar efter. För mig verkar partiklarna vara lite större i storlek och tätt packade. Kanske vill du att partiklarna ska ha en annan form eller ha en slumpmässig storlek. Particles.js låter dig ställa in alla dessa och många fler egenskaper i JSON som du kan referera till under initialiseringen. Allmän syntax för att ringa funktionen kommer att se ut:
partiklarJS (dom-id, path-json, callback (valfritt));
Här, dom-id är elementets id där du vill att partiklarna ska visas. path-json är sökvägen till JSON-filen med alla konfigurationsalternativ och ring tillbaka är en valfri återuppringningsfunktion. Istället för en sökväg kan du direkt sätta din JSON-kod i den andra parametern.
Låt oss försöka skapa snöfall med detta fantastiska bibliotek. Först kommer vår funktion att se ut:
Accentsconagua
partiklarJS ("snöfall", "tillgångar / snowflakes.json");Jag har tagit bort återuppringningsfunktionen och ändrat DOM Id till ett mer specifikt namn. Snöflingorna kommer mest att ha en sfärisk form. De kommer att falla nedåt och ha en ojämn storlek. Också i vår första demo kommer de inte att kopplas samman med rader.
I början, vår snowflakes.json filen kommer att ha följande kod:
"partiklar": , "interaktivitet":
Alla våra konfigurationsalternativ relaterade till fysiska egenskaper som form, storlek och rörelse kommer att gå inuti partiklar. Alla konfigurationsalternativ som bestämmer interaktionsbeteendet kommer att gå inuti interaktivitet.
Jag ställer antalet partiklar till 100. Detta beror generellt på tillgängligt utrymme. Som tidigare diskuterats kommer jag också att ställa formen på cirkel. Vid denna tidpunkt ska din fil se ut som:
"partiklar": "nummer": "värde": 100, "form": "typ": "cirkel", "interaktivitet":
Jag använder ett värde av 10 för att bestämma storleken på snöflingor. Eftersom snöflingor varierar i storlek, kommer jag att ställa in slumpmässig till Sann. På detta sätt kan snöflingorna ha någon storlek mellan noll och den maximala gränsen som vi angav. För att inaktivera eller ta bort alla linjer som länkar dessa partiklar tillsammans kan du ställa in Gör det möjligt till falsk för line_linked.
För att flytta partiklar runt måste du ställa in Gör det möjligt egendom till Sann. Utan någon annan inställning kommer partiklarna att flytta slumpmässigt som om de är i rymden. Du kan ställa in riktningen för dessa partiklar med ett strängvärde som "botten". Även om den allmänna rörelsen av partiklar är nedåt, behöver de fortfarande flytta lite slumpmässigt för att se naturligt ut. Detta kan uppnås genom inställning rakt till falsk. Vid denna punkt, snowflakes.json kommer att ha följande kod:
"antal": "värde": 100, "form": "typ": "cirkel", "storlek": "värde": 10, "slumpmässigt": sant "line": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom"
Med JSON-koden ovan kommer du att få följande resultat:
Om du sveper över demo ovan kommer du att märka att linjerna fortfarande existerar men bara dyker upp tillfälligt under svävaren. För att ta bort dem helt kan du ställa in Gör det möjligt egendom för onhover händelse till falsk. Försök att klicka inuti demoen ovan och du kommer märka att varje klick genererar fyra partiklar. Detta är standardbeteendet. Du kan också ändra antalet partiklar med hjälp av particles_nb egendom under tryck. Jag har satt det här numret till 12 i det här fallet.
Du kan också avgöra om händelserna ska upptäckas i fönstret eller duken med hjälp av detect_on alternativ.
Här är den fullständiga koden för JSON-filen:
"antal": "värde": 100, "form": "typ": "cirkel", "storlek": "värde": 10, "slumpmässigt": sant "line": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom" "detect_on": "canvas", "events": "omhänder": "aktivera": false, "lägen": "push": "particles_nb": 12
Som du kan se behövde jag inte specifikt aktivera onclick händelse. Den är aktiverad som standard. På samma sätt kan jag ta bort andra alternativ som "detect_on": "canvas" under interaktivitet och "straight": false under flytta. Jag har hållit dem så att förrätter inte blir förvirrade om saker som varför partiklarna inte rör sig i raka linjer.
Du kan prova olika värden för att modifiera snöflingorna i denna CodePen-demo.
Att komma igång med Particles.js är enkelt. Om du aldrig har arbetat med partikelsystemen tidigare kommer detta bibliotek att komma igång på nolltid. Denna handledning var bara en grundläggande introduktion till biblioteket. I de följande två handledningarna i denna serie kommer jag att täcka alla aspekter av detta bibliotek i mycket mer detalj.
Om du har några frågor angående denna handledning, vänligen meddela mig det i kommentarerna.
