Einführung in den Code zur Verwendung von Particles.js zum Erstellen atemberaubender partikeldynamischer Hintergrundeffekte, die Zhihu imitieren

Dieser Artikel teilt Ihnen Particles.js mit, um Partikeleffekte basierend auf Canvas Canvas zu erstellen. Freunde, die ihn benötigen, können darauf verweisen

Ich habe mich seit einem Jahr nicht bei Zhihu angemeldet Lange Zeit und festgestellt, dass der dynamische Partikeleffekt auf der Anmeldeseite ziemlich cool ist. Ja, überprüfen Sie den Code und verwenden Sie Particles.js, um Partikeleffekte basierend auf der Canvas-Leinwand zu erstellen.

Bild oben

Bild oben:

Es fühlte sich wie eine große Sache an, also habe ich eines gemacht und damit gespielt .

Github: https://github.com/VincentGarreau/particles.js/

Betriebsprozess:

Es gibt einen grundlegenden Prozess im Internet, auf den Sie sich beziehen können. Wenn Sie ihn jedoch direkt auf der Anmeldeseite verwenden, treten kleine Fehler auf, die angepasst werden müssen.

1. Fügen Sie zunächst die Datei „particles.js“ in die Seite ein.

<script src="js/particles.js"></script>

2. Verwenden Sie ein p auf der Seite als Behälter zum Platzieren von Partikeln. [Normalerweise unten platziert, muss das CSS verbessert werden]

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3. Laden der Konfigurationsdatei: Laut Internet erfordert die Verwendung der Methode „load()“ eine Konfigurations-JSON-Datei und das Licht Der Pfad hat mich deaktiviert.

                                                                                                                                                                                                                                                 . Die Steuerung der Partikelanzahl, der Bewegungsgeschwindigkeit usw.

Partikel ist immer noch etwas problematisch. Nach dem Herunterladen der Datei in Chrome und dem anschließenden Wechsel zu dieser Seite wird sie deaktiviert. Warten Sie auf eine Lösung.

Das obige ist der detaillierte Inhalt vonEinführung in den Code zur Verwendung von Particles.js zum Erstellen atemberaubender partikeldynamischer Hintergrundeffekte, die Zhihu imitieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!