Share
Viele winzige Teilchen, die sich bewegen und miteinander oder mit Ihnen interagieren, haben einen bestimmten Reiz. Wenn Sie sich jemals in einer Situation befinden, in der Sie mit vielen Partikeln arbeiten müssen, wird Particles.js Ihnen gute Dienste leisten. Wie aus dem Namen hervorgeht, handelt es sich um eine JavaScript-Bibliothek, mit der Sie Partikelsysteme erstellen können. Darüber hinaus ist es leicht, einfach zu bedienen und bietet Ihnen viel Kontrolle.
In diesem Tutorial werde ich alle Funktionen der Bibliothek behandeln und Ihnen den Einstieg erleichtern. Dieses Tutorial ist der erste Teil der Serie und behandelt nur die Grundlagen.
Zuerst müssen Sie die Bibliothek hosten. Sie können es entweder auf Ihren eigenen Server hochladen oder jsdeliver CDN wie ich verwenden.
Sie müssen auch ein DOM-Element erstellen, in dem Particles.js die Partikel erstellt. Geben Sie etwas leicht identifizierbar Ich würde , zum späteren Nachschlagen.
Um ein Basissystem mit Standardeinstellungen zu erstellen, benötigen Sie nur eine einzige Zeile JavaScript, um die Bibliothek zu initialisieren.
Teilchen JS ();
Die Partikel sind standardmäßig weiß. Sie sind auch mit dünnen weißen Linien verbunden. Wenn Sie also im Moment nichts sehen, ändern Sie einfach den Hintergrund in etwas anderes. Hier ist mein CSS zum Stylen des Partikels div:
# Partikeln-Js Hintergrund: Kornblumenblau;
Versuchen Sie, irgendwo in der Demo unten zu klicken. Nach jedem Klick generiert Particles.js vier weitere neue Partikel.
Obwohl für die Erstellung der vorherigen Demo nur vier Zeilen Code erforderlich waren, ist das Ergebnis möglicherweise nicht das, was Sie suchen. Für mich scheinen die Partikel etwas größer und dichter zu sein. Vielleicht möchten Sie, dass die Partikel eine andere Form haben oder eine zufällige Größe haben. Mit Particles.js können Sie alle diese und viele weitere Eigenschaften in JSON festlegen, auf die Sie während der Initialisierung verweisen können. Die allgemeine Syntax für den Aufruf der Funktion sieht folgendermaßen aus:
PartikelnJS (Dom-ID, Pfad-Json, Rückruf (optional));
Hier, dom-id ist die ID des Elements, an dem die Partikel angezeigt werden sollen. Pfad-Json ist der Pfad zur JSON-Datei mit allen Konfigurationsoptionen und Ruf zurück ist eine optionale Rückruffunktion. Anstelle eines Pfads können Sie Ihren JSON-Code direkt in den zweiten Parameter einfügen.
Versuchen wir mit dieser fantastischen Bibliothek, Schneefall zu erzeugen. Zuerst sieht unsere Funktion so aus:
Accentsconagua
PartikelnJS ("Schneefall", "assets / snowflakes.json");Ich habe die Rückruffunktion entfernt und das DOM geändert Ich würde auf einen genaueren Namen. Die Schneeflocken haben meist eine Kugelform. Sie fallen nach unten und haben eine nicht einheitliche Größe. Im Gegensatz zu unserer ersten Demo werden sie auch nicht durch Linien verbunden.
Am Anfang unser snowflakes.json Datei wird den folgenden Code haben:
"Partikel": , "Interaktivität":
Alle unsere Konfigurationsoptionen, die sich auf physikalische Eigenschaften wie Form, Größe und Bewegung beziehen, werden berücksichtigt Teilchen. Alle Konfigurationsoptionen, die das Interaktionsverhalten bestimmen, werden in das System aufgenommen Interaktivität.
Ich setze die Anzahl der Partikel auf 100. Dies hängt im Allgemeinen vom verfügbaren Platz ab. Wie zuvor beschrieben, werde ich die Form auch auf Kreis setzen. An diesem Punkt sollte Ihre Datei folgendermaßen aussehen:
"Partikel": "Nummer": "Wert": 100, "Form": "Typ": "Kreis", "Interaktivität":
Ich verwende einen Wert von 10, um die Größe der Schneeflocken einzustellen. Da Schneeflocken in der Größe variieren, werde ich einstellen zufällig zu wahr. Auf diese Weise können die Schneeflocken eine beliebige Größe zwischen null und der von uns angegebenen maximalen Grenze haben. Um alle Linien zu deaktivieren oder zu entfernen, die diese Partikel miteinander verbinden, können Sie festlegen aktivieren zu falsch zum line_linked.
Um Partikel zu bewegen, müssen Sie die Option einstellen aktivieren Eigentum an wahr. Ohne eine andere Einstellung bewegen sich die Teilchen zufällig, als ob sie sich im Weltraum befinden würden. Sie können die Richtung dieser Partikel mit einem Zeichenfolgenwert wie einstellen "Unterseite". Obwohl die allgemeine Bewegung der Partikel nach unten verläuft, müssen sie sich immer noch zufällig bewegen, um natürlich zu wirken. Dies kann durch Einstellung erreicht werden Gerade zu falsch. An diesem Punkt, snowflakes.json wird den folgenden Code haben:
"Partikel": "Zahl": "Wert": 100, "Form": "Typ": "Kreis", "Größe": "Wert": 10, "zufällig": wahr, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interaktivität":
Mit dem obigen JSON-Code erhalten Sie folgendes Ergebnis:
Wenn Sie den Mauszeiger über die obige Demo bewegen, werden Sie feststellen, dass die Zeilen noch vorhanden sind, aber nur vorübergehend angezeigt werden. Um sie vollständig zu entfernen, können Sie das einstellen aktivieren Eigentum für die onhover Veranstaltung zu falsch. Klicken Sie in die obige Demo, und Sie werden feststellen, dass jeder Klick vier Partikel erzeugt. Dies ist das Standardverhalten. Sie können die Anzahl der Partikel auch mit ändern Partikel_nb Eigentum unter drücken. Ich habe diese Zahl in diesem Fall auf 12 gesetzt.
Sie können auch festlegen, ob die Ereignisse im Fenster oder auf der Zeichenfläche mithilfe von erkannt werden sollen detect_on Möglichkeit.
Hier ist der vollständige Code für die JSON-Datei:
"Partikel": "Zahl": "Wert": 100, "Form": "Typ": "Kreis", "Größe": "Wert": 10, "zufällig": wahr, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interaktivität": "detect_on": "canvas", "events": "onhover": "enable": false, "modes": "push": "particle_nb": 12
Wie Sie sehen können, musste ich das nicht ausdrücklich aktivieren onclick Veranstaltung. Es ist standardmäßig aktiviert. Ebenso könnte ich andere Optionen wie entfernen "detect_on": "canvas" unter Interaktivität und "gerade": falsch unter Bewegung. Ich habe sie so aufbewahrt, dass sich Starter nicht verwirrt fühlen, zum Beispiel, warum sich die Teilchen nicht in geraden Linien bewegen.
Sie können verschiedene Werte ausprobieren, um die Schneeflocken in dieser CodePen-Demo zu ändern.
Erste Schritte mit Particles.js sind einfach. Wenn Sie noch nie mit Partikelsystemen gearbeitet haben, können Sie in kürzester Zeit mit dieser Bibliothek beginnen. Dieses Tutorial war nur eine grundlegende Einführung in die Bibliothek. In den nächsten beiden Tutorials dieser Serie werde ich alle Aspekte dieser Bibliothek ausführlicher behandeln.
Wenn Sie Fragen zu diesem Tutorial haben, teilen Sie mir dies bitte in den Kommentaren mit.
