How to use Particle.js in JavaScript projects?-JS Tutorial-php.cn

How to use Particle.js in JavaScript projects?

WBOY

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

forward

1079 people have browsed it

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

As the name suggests, the Particle.js library allows us to add particles to specific HTML elements. Additionally, we can change the number of shapes of the particles in the div.

We can add animation or motion to particles using the Particle.js library. Here we will learn to change the shape, color and movement of particles through different examples.

grammar

Users can use the Particle.js library in JavaScript projects according to the following syntax.

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

Copy after login

In the above syntax, id represents the id of the div element to which we need to add particles.

Example

In the example below, we are using the Particles.JS library and using the CDN in the tag. We created the element and assigned the id in the HTML body.

In JavaScript, we added the tsarticles.load() method to load particles. As the first parameter of the load() method, we pass the id of the div element. We pass this object as the second parameter containing the particle properties.

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

Copy after login

In the output, the user can observe the particles in the div element.
Example

The following example will add movement and color to particles. Users can use the move attribute to move particles. The "move" property takes the value as an object containing the enabled property with a boolean value.

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

Copy after login

Users can use the color property to change the color of particles that contain this object as a value.

Users can use the following shapes of particles in the Particle.JS library.

"Polygon"
"triangle"
"Circle"
"Edge"/"Square"
"image"/"image"
"Star"
"Character"/"Character"

Example

In the example below, we have added a polygon shape to the particles. Additionally, we changed the size of the particles using the size property. Additionally, we added animation to the particles themselves, increasing and decreasing the size of the particles that users can observe in the output.

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

Copy after login

User learned to use keywords.js library in JavaScript projects. However, users can install particle.js library on their local machine and import it using path. Whenever users want to use the Particle.js library with a NodeJS application, they should install it using NPM commands.

The above is the detailed content of How to use Particle.js in JavaScript projects?. For more information, please follow other related articles on the PHP Chinese website!