Share
Heel wat kleine deeltjes die rond bewegen en met elkaar of met jou interacteren, hebben een bepaalde aantrekkingskracht op hen. Als je ooit in een situatie bent waarin je met veel deeltjes moet werken, zal Particles.js je goed van pas komen. Zoals blijkt uit de naam, is het een JavaScript-bibliotheek die u kan helpen bij het maken van particle-systemen. Bovendien is het licht in gewicht, gemakkelijk te gebruiken en heeft u veel controle.
In deze zelfstudie zal ik alle functies van de bibliotheek bespreken en u helpen aan de slag te gaan. Deze tutorial is het eerste deel van de serie en behandelt alleen de basis.
Eerst moet je de bibliotheek hosten. Je kunt het op je eigen server uploaden of jsdeliver CDN zoals ik gebruiken.
Je moet ook een DOM-element maken waar Particles.js de deeltjes zal maken. Geef het een beetje gemakkelijk herkenbaar ID kaart , voor later refereren.
Om nu een basissysteem met deeltjes met standaardinstellingen te maken, hebt u slechts één regel JavaScript nodig om de bibliotheek te initialiseren.
particlesJS ();
De deeltjes zijn standaard wit. Ze zijn ook met elkaar verbonden door dunne witte lijnen. Dus, als je op dit moment niets ziet, verander dan de achtergrond naar iets anders. Hier is mijn CSS voor het stylen van het deeltje div:
# particles-js background: cornflowerblue;
Probeer ergens in de onderstaande demo te klikken. Na elke klik genereert Particles.js nog vier nieuwe deeltjes.
Hoewel het slechts vier regels code kostte om de vorige demo te maken, is het eindresultaat misschien niet wat u zoekt. Voor mij lijken de deeltjes iets groter in omvang en dicht opeen gepakt. Misschien wil je dat de deeltjes een andere vorm hebben of een willekeurige grootte hebben. Met Particles.js kunt u al deze en nog veel meer eigenschappen in JSON instellen waarnaar u tijdens de initialisatie kunt verwijzen. Algemene syntaxis voor het aanroepen van de functie ziet er als volgt uit:
particlesJS (dom-id, path-json, callback (optioneel));
Hier, dom-id is de id van element waar je de deeltjes wilt laten verschijnen. path-json is het pad naar het JSON-bestand met alle configuratie-opties, en Bel terug is een optionele terugbelfunctie. In plaats van een pad kunt u uw JSON-code direct in de tweede parameter plaatsen.
Laten we proberen sneeuw te maken met behulp van deze geweldige bibliotheek. In eerste instantie zal onze functie er als volgt uitzien:
Accentsconagua
particlesJS ("snowfall", 'assets / snowflakes.json');Ik heb de callback-functie verwijderd en de DOM gewijzigd ID kaart naar een meer specifieke naam. De sneeuwvlokken hebben meestal een bolvorm. Ze vallen naar beneden en hebben een niet-uniforme grootte. In tegenstelling tot onze eerste demo zullen ze ook niet met lijnen verbonden zijn.
In het begin, onze snowflakes.json bestand heeft de volgende code:
"particles": , "interactivity":
Al onze configuratieopties met betrekking tot fysieke eigenschappen zoals vorm, grootte en beweging gaan naar binnen deeltjes. Alle configuratieopties die het interactiegedrag bepalen, gaan naar binnen interactiviteit.
Ik stel het aantal deeltjes in op 100. Dit hangt in het algemeen af van de beschikbare ruimte. Zoals eerder besproken, zal ik ook de vorm instellen op de cirkel. Op dit punt zou uw bestand er als volgt uit moeten zien:
"particles": "number": "value": 100, "shape": "type": "circle", "interactivity":
Ik gebruik een waarde van 10 om de grootte van sneeuwvlokken in te stellen. Omdat sneeuwvlokken in grootte variëren, zal ik instellen willekeurig naar waar. Op deze manier kunnen de sneeuwvlokken elke grootte hebben tussen nul en de maximale limiet die we hebben opgegeven. Om alle lijnen die deze deeltjes aan elkaar verbinden uit te schakelen of te verwijderen, kunt u instellen in staat stellen naar vals voor line_linked.
Om deeltjes rond te verplaatsen, moet je de in staat stellen eigendom aan waar. Zonder enige andere instelling zullen de deeltjes lukraak bewegen alsof ze zich in de ruimte bevinden. U kunt de richting van deze deeltjes instellen met een tekenreekswaarde zoals "bodem". Hoewel de algemene beweging van deeltjes naar beneden is, moeten ze nog steeds een beetje willekeurig bewegen om er natuurlijk uit te zien. Dit kan worden bereikt door in te stellen recht naar vals. Op dit punt, snowflakes.json zal de volgende code hebben:
"particles": "number": "value": 100, "shape": "type": "circle", "size": "value": 10, "random": true, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivity":
Met bovenstaande JSON-code krijgt u het volgende resultaat:
Als je de muisaanwijzer boven de demo hierboven houdt, zie je dat de lijnen nog steeds bestaan, maar alleen tijdens de zweeftekst verschijnen. Om ze volledig te verwijderen, kunt u de in staat stellen eigendom voor de onhover evenement naar vals. Probeer binnen de demo hierboven te klikken en je zult merken dat elke klik vier deeltjes genereert. Dit is het standaardgedrag. U kunt ook het aantal deeltjes wijzigen met behulp van de particles_nb eigendom onder Duwen. Ik heb dit nummer in dit geval op 12 gezet.
U kunt ook bepalen of de gebeurtenissen in het venster of canvas moeten worden gedetecteerd met behulp van de detect_on keuze.
Hier is de volledige code voor het JSON-bestand:
"particles": "number": "value": 100, "shape": "type": "circle", "size": "value": 10, "random": true, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivity": "detect_on": "canvas", "events": "onhover": "enable": false, "modes": "push": "particles_nb": 12
Zoals je kunt zien, hoefde ik het niet specifiek in te schakelen bij klikken evenement. Het is standaard ingeschakeld. Op dezelfde manier kon ik andere opties zoals verwijderen "detect_on": "canvas" onder interactiviteit en "rechtdoor": onjuist onder verhuizing. Ik heb ze bewaard zodat starters niet in de war raken over dingen als waarom de deeltjes niet in rechte lijnen bewegen.
U kunt verschillende waarden uitproberen om de sneeuwvlokken aan te passen in deze CodePen-demo.
Aan de slag met Particles.js is eenvoudig. Als je nog nooit met deeltjessystemen hebt gewerkt, kun je met deze bibliotheek snel aan de slag. Deze zelfstudie was slechts een basisinleiding tot de bibliotheek. In de volgende twee tutorials van deze serie zal ik alle aspecten van deze bibliotheek in meer detail bespreken.
Als je nog vragen hebt over deze tutorial, laat het me dan weten in de comments.
