Partikel.js: Vorstellung

() translation by (you can also view the original English article)

Viele winzige Teilchen, die sich bewegen und miteinander oder mit Ihnen interagieren, haben einen gewissen Reiz. Wenn Sie jemals in einer Situation sind, in der Sie mit vielen Partikeln arbeiten müssen, wird Particles.js Ihnen gute Dienste tun. Wie der Name zeigt, handelt es sich um eine JavaScript-Bibliothek, die Ihnen beim Erstellen von Partikelsystemen helfen kann. Darüber hinaus ist es leichtgewichtig, einfach zu bedienen und gibt Ihnen eine Menge Kontrolle.

In diesem Tutorial werde ich alle Funktionen der Bibliothek behandeln und Ihnen helfen, loszulegen. Dieses Tutorial ist der erste Teil der Serie und wird nur die Grundlagen abdecken.

Installation und Nutzung

Zuerst müssen Sie die Bibliothek hosten. Sie können es entweder auf Ihren eigenen Server hochladen oder wie ich jsdeliver CDN verwenden.

1	<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

Sie müssen auch ein DOM-Element erstellen, in dem Particles.js die Partikel erstellen. Geben Sie ihm eine leicht identifizierbare id , um später darauf zu verweisen.

1	<div id="particles-js"></div>

Um nun ein grundlegendes System von Partikeln mit Standardeinstellungen zu erstellen, benötigen Sie nur eine einzige Zeile JavaScript, um die Bibliothek zu initialisieren.

1	particlesJS();

Die Partikel sind standardmäßig weiß. Sie sind auch mit dünnen weißen Linien miteinander verbunden. Wenn Sie also im Moment nichts sehen, ändern Sie einfach den Hintergrund zu etwas anderem. Hier ist mein CSS für das Styling des div der Partikel:

1	#particles-js {
2	background: cornflowerblue;
3	}

Versuchen Sie, irgendwo in der Demo unten klicken. Nach jedem Klick wird Particles.js vier weitere neue Partikel erzeugen.

Festlegen individueller Optionen

Obwohl es nur vier Codezeilen brauchte, um die vorherige Demo zu erstellen, ist das Endergebnis möglicherweise nicht das, was Sie suchen. Für mich scheinen die Partikel etwas größer und dicht gepackt 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 all diese und viele weitere Eigenschaften in JSON festlegen, auf die Sie während der Initialisierung verweisen können. Die allgemeine Syntax zum Aufrufen der Funktion sieht wie folgt aus:

1	particlesJS(dom-id, path-json, callback (optional));

Hier ist dom-id die ID des Elements, in dem die Partikel angezeigt werden sollen. path-json ist der Pfad zur JSON-Datei mit allen Konfigurationsoptionen, und callback ist eine optionale Callback-Funktion. Anstelle eines Pfads können Sie Ihren JSON-Code direkt in den zweiten Parameter einfügen.

Lassen Sie uns versuchen, mit dieser tollen Bibliothek Schneefall zu erstellen. Zu Beginn wird unsere Funktion wie folgt aussehen:

1	particlesJS("snowfall", 'assets/snowflakes.json');

Ich habe die Callback-Funktion entfernt und die DOM-Id in einen spezifischeren Namen geändert. Die Schneeflocken haben meist eine kugelförmige Form. Sie fallen nach unten und haben eine ungleichmäßige Größe. Auch, anders als in unserer ersten Demo, werden sie nicht über Linien verbunden werden.

Bewege Partikel umher

Am Anfang hat unsere Datei snowflakes.json den folgenden Code:

{
  "particles": {
  
  },
  "interactivity": {
    
  }
}

Alle unsere Konfigurationsoptionen im Zusammenhang mit physikalischen Eigenschaften wie Form, Größe und Bewegung gehören particles. Alle Konfigurationsoptionen, die das Interaktionsverhalten bestimmen, gehören in interactivity.

Ich stelle die Anzahl der Partikel auf 100 ein. Dies hängt in der Regel vom verfügbaren Platz ab. Wie bereits erwähnt, werde ich auch die Form auf Kreis festlegen. An diesem Punkt sollte Ihre Datei wie folgt aussehen:

{
  "particles": {
    "number": {
      "value": 100
    },
    "shape": {
      "type": "circle"
    }
  },
  "interactivity": {
    
  }
}

Ich verwende einen Wert von 10, um die Größe der Schneeflocken festzulegen. Da Schneeflocken in der Größe variieren, werde ich random auf true setzen. Auf diese Weise können die Schneeflocken eine beliebige Größe zwischen Null und der von uns angegebenen maximalen Grenze haben. Um alle Linien, die diese Partikel miteinander verknüpfen, zu deaktivieren oder zu entfernen, können Sie enable auf false für line_linked festlegen.

Um Partikel zu bewegen, müssen Sie die enable-Eigenschaft auf true festlegen. Ohne weitere Einstellung bewegen sich die Teilchen planlos, als wären sie im freien Raum. Sie können die Richtung dieser Partikel mit einem Zeichenfolgenwert wie "bottom" festlegen. Auch wenn die allgemeine Bewegung der Teilchen nach unten geht, müssen sie sich immer noch ein wenig zufällig bewegen, um natürlich auszusehen. Dies kann erreicht werden, indem Sie straight auf false setzen. An diesem Punkt beinhaltet snowflakes.json den folgenden Code:

{
  "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": {
    
  }
}

Mit dem obigen JSON-Code erhalten Sie folgendes Ergebnis:

Ändern des Interaktionsverhaltens

Wenn Sie den Mauszeiger über die obige Demo bewegen, werden Sie feststellen, dass die Linien noch vorhanden sind, aber nur vorübergehend während des hovers des Mauszeigers angezeigt werden. Um sie vollständig zu entfernen, können Sie die enable-Eigenschaft für das onhover-Ereignis auf false setzen. Klicken Sie in die Demo oben und Sie werden feststellen, dass jeder Klick vier Partikel erzeugt. Dies ist das Standardverhalten. Sie können auch die Anzahl der Partikel ändern, die die particles_nb-Eigenschaft unter push verwenden. Ich habe diese Zahl in diesem Fall auf 12 gesetzt.

Sie können auch mithilfe der Option detect_on bestimmen, ob die Ereignisse im Fenster oder im Canvas-Bereich erkannt werden sollen.

Hier ist der komplette Code für die JSON-Datei :

{
  "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
      }
    }
  }
}

Wie Sie sehen können, musste ich das onclick-Event nicht speziell aktivieren. Es ist standardmäßig aktiviert. In ähnlicher Weise könnte ich andere Optionen wie "detect_on":"canvas" unter interactivity entfernen und "straight": false unter move. Ich habe sie so aufbewahrt, dass die Starter nicht verwirrt werden, wenn sie sich darüber ärgern, warum sich die Teilchen nicht in geraden Linien bewegen.

Sie können verschiedene Werte ausprobieren, um die Schneeflocken in dieser CodePen-Demo zu ändern.

Letzte Gedanken

Die ersten Schritte mit Particles.js sind einfach. Wenn Sie noch nie mit Partikelsystemen gearbeitet haben, werden Sie mit dieser Bibliothek im Handumdrehen den Einstieg finden. 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 viel ausführlicher behandeln.