recherche

Maison >interface Web >js tutoriel >Comment utiliser Particle.js dans des projets JavaScript ?

Comment utiliser Particle.js dans des projets JavaScript ?

WBOY
WBOYavant
2023-09-11 23:33:101094parcourir

如何在 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
   }
});

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>

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>

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>

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!

JavaScript html npm JS 对象
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Types de canard en TypeScriptArticle suivant：Types de canard en TypeScript

Articles Liés

Voir plus