Wie verwende ich Particle.js in JavaScript-Projekten?-js-Tutorial-php.cn

Wie verwende ich Particle.js in JavaScript-Projekten?

WBOY

Freigeben： 2023-09-11 23:33:10

nach vorne

1108 Leute haben es durchsucht

如何在 JavaScript 项目中使用 Particle.js？

Wie der Name schon sagt, ermöglicht uns die Particle.js-Bibliothek, Partikel zu bestimmten HTML-Elementen hinzuzufügen. Darüber hinaus können wir die Anzahl der Partikelformen im Div ändern.

Mit der Particle.js-Bibliothek können wir Partikeln Animationen oder Bewegungen hinzufügen. Hier lernen wir anhand verschiedener Beispiele, wie man die Form, Farbe und Bewegung von Partikeln verändert.

Grammatik

Benutzer können die Particle.js-Bibliothek in JavaScript-Projekten gemäß der folgenden Syntax verwenden.

tsParticles.load("id", {
   particles: {
      
      // properties for the particles
   }
});

Nach dem Login kopieren

In der obigen Syntax stellt id die ID des div-Elements dar, zu dem wir Partikel hinzufügen müssen.

Beispiel

Im folgenden Beispiel verwenden wir die Particles.JS-Bibliothek und das CDN im -Tag. Wir haben das Element erstellt und die ID im HTML-Body zugewiesen.

In JavaScript haben wir die Methode tsarticles.load() zum Laden von Partikeln hinzugefügt. Als ersten Parameter der Methode load() übergeben wir die ID des div-Elements. Wir übergeben dieses Objekt als zweiten Parameter, der die Partikeleigenschaften enthält.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #tsparticles {
         width: 100%;
         height: 100%;
         background-color: grey;
      }
   </style>
</head>
<body>
   <div id = "tsparticles">
      <h2> Using the <i> particle.js library </i> in the JavaScript project. </h2>
   </div>
   <script>
      tsParticles.load("tsparticles", {
         particles: {
            number: {
               value: 500
            },
         }
      });
   </script>
</body>
</html>

Nach dem Login kopieren

In der Ausgabe kann der Benutzer die Partikel im div-Element beobachten.
Beispiel

Das folgende Beispiel fügt den Partikeln Bewegung und Farbe hinzu. Benutzer können das Attribut „move“ verwenden, um Partikel zu verschieben. Die Eigenschaft „move“ übernimmt den Wert als Objekt, das die aktivierte Eigenschaft mit einem booleschen Wert enthält.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #particles {
         width: 100%;
         height: 100%;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <div id = "particles"> 
      <h2> Using the <i> particle.js library </i> in the JavaScript project. </h2>
   </div>
   <script>
      tsParticles.load("particles", {
         particles: {
            number: {
               value: 1000
            },
            move: {
               enable: true
            },
            color: {
               value: "#272701"
            },
         }
      });
   </script>
</body>
</html>

Nach dem Login kopieren

Benutzer können die Farbeigenschaft verwenden, um die Farbe von Partikeln zu ändern, die dieses Objekt als Wert enthalten.

Benutzer können die folgenden Partikelformen in der Particle.JS-Bibliothek verwenden.

"Polygon"
"Dreieck"
"Kreis"
"Kante"/"Quadrat"
"Bild"/"Bild"
"Stern"
"Charakter"/"Charakter"

Beispiel

Im folgenden Beispiel haben wir den Partikeln eine Polygonform hinzugefügt. Zusätzlich haben wir die Größe der Partikel mithilfe der Größeneigenschaft geändert. Darüber hinaus haben wir den Partikeln selbst eine Animation hinzugefügt, wodurch die Größe der Partikel, die Benutzer in der Ausgabe beobachten können, vergrößert und verkleinert wird.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
   <style>
      #particles {
         width: 100%;
         height: 100%;
         background-color: lightgreen; 
      }
   </style>
</head>
<body>
   <div id = "particles">
      <h2>Using the <i> particle.js library </i> in the JavaScript project. </h2>
   </div>
   <script>
      tsParticles.load("particles", {
         particles: {
            number: {
               value: 1000
            },
            move: {
               enable: true
            },
            color: {
               value: "#ff0342"
            },

            // adding shape of particles
            shape: {
               type: "polygon",
            },

            // changing the size of elements
            size: {
               value: 8,
               random: true, 
               animation: {
                  enable: true,
                  speed: 40,
                  sync: true
               },
               move: {
                  enable: true,
               },
            }
         }
      });
   </script>
</body>
</html>

Nach dem Login kopieren

Der Benutzer hat gelernt, die Bibliothek keywords.js in JavaScript-Projekten zu verwenden. Benutzer können jedoch die Bibliothek „particle.js“ auf ihrem lokalen Computer installieren und über den Pfad importieren. Wann immer Benutzer die Particle.js-Bibliothek mit einer NodeJS-Anwendung verwenden möchten, sollten sie sie mithilfe von NPM-Befehlen installieren.

Das obige ist der detaillierte Inhalt vonWie verwende ich Particle.js in JavaScript-Projekten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!