Comment utiliser Particle.js dans des projets JavaScript ?-js tutoriel-php.cn

Comment utiliser Particle.js dans des projets JavaScript ?

WBOY

Libérer： 2023-09-11 23:33:10

avant

1049 Les gens l'ont consulté

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

Comme son nom l'indique, la bibliothèque Particle.js nous permet d'ajouter des particules à des éléments HTML spécifiques. De plus, nous pouvons modifier le nombre de formes des particules dans le div.

Nous pouvons ajouter une animation ou un mouvement aux particules à l'aide de la bibliothèque Particle.js. Ici, nous apprendrons à changer la forme, la couleur et le mouvement des particules à travers différents exemples.

Grammaire

Les utilisateurs peuvent utiliser la bibliothèque Particle.js dans les projets JavaScript selon la syntaxe suivante.

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

Copier après la connexion

Dans la syntaxe ci-dessus, id représente l'identifiant de l'élément div auquel nous devons ajouter des particules.

Exemple

Dans l'exemple ci-dessous, nous utilisons la bibliothèque Particles.JS et utilisons le CDN dans la balise . Nous avons créé l'élément et attribué l'identifiant dans le corps HTML.

En JavaScript, nous avons ajouté la méthode tsarticles.load() pour charger les particules. Comme premier paramètre de la méthode load(), nous transmettons l'identifiant de l'élément div. Nous passons cet objet comme deuxième paramètre contenant les propriétés des particules.

<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>

Copier après la connexion

Dans la sortie, l'utilisateur peut observer les particules à l'intérieur de l'élément div.
Exemple

L'exemple ci-dessous ajoutera du mouvement et de la couleur aux particules. Les utilisateurs peuvent utiliser l'attribut move pour déplacer des particules. La propriété "move" prend la valeur comme un objet contenant la propriété activée avec une valeur booléenne.

<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>

Copier après la connexion

Les utilisateurs peuvent utiliser la propriété color pour changer la couleur des particules qui contiennent cet objet comme valeur.

Les utilisateurs peuvent utiliser les formes de particules suivantes dans la bibliothèque Particle.JS.

"polygone"
"Triangle"
"Cercle"
"bord"/"carré"
"image"/"image"
"Étoile"
"Personnage"/"Caractère"

Exemple

Dans l'exemple ci-dessous, nous avons ajouté une forme de polygone aux particules. De plus, nous avons modifié la taille des particules en utilisant la propriété size. De plus, nous avons ajouté une animation aux particules elles-mêmes, augmentant et diminuant la taille des particules que les utilisateurs peuvent observer dans le résultat.

<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>

Copier après la connexion

L'utilisateur a appris à utiliser la bibliothèque keywords.js dans les projets JavaScript. Cependant, les utilisateurs peuvent installer la bibliothèque particule.js sur leur ordinateur local et l'importer en utilisant le chemin. Chaque fois que les utilisateurs souhaitent utiliser la bibliothèque Particle.js avec une application NodeJS, ils doivent l'installer à l'aide des commandes NPM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser Particle.js dans des projets JavaScript ?

Grammaire

Exemple

Dans la sortie, l'utilisateur peut observer les particules à l'intérieur de l'élément div.
Exemple

Exemple

Comment utiliser Particle.js dans des projets JavaScript ?

Grammaire

Exemple

Dans la sortie, l'utilisateur peut observer les particules à l'intérieur de l'élément div. Exemple

Exemple

Dans la sortie, l'utilisateur peut observer les particules à l'intérieur de l'élément div.
Exemple