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

顾名思义，Particle.js 库允许我们将粒子添加到特定的 HTML 元素。此外，我们还可以更改 div 中粒子的形状数量。

我们可以使用 Particle.js 库向粒子添加动画或运动。在这里，我们将通过不同的示例学习改变粒子的形状、颜色和运动。

语法

用户可以按照以下语法在 JavaScript 项目中使用 Particle.js 库。

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

在上面的语法中，id代表我们需要添加粒子的div元素的id。

示例

在下面的示例中，我们使用了 Particles.JS 库，并在 标记中使用了 CDN。我们创建了 元素并在 HTML 正文中分配了 id。

在 JavaScript 中，我们添加了 tsarticles.load() 方法来加载粒子。作为 load() 方法的第一个参数，我们传递了 div 元素的 id。我们将该对象作为包含粒子属性的第二个参数传递。

   
   



   

      
 Using the  particle.js library  in the JavaScript project. 
   
   

 

在输出中，用户可以观察 div 元素中的粒子。

示例

下面的示例将为粒子添加运动和颜色。用户可以使用 move 属性来移动粒子。 “move”属性将值作为一个对象，其中包含带有布尔值的启用属性。

   
   



   
 
      
 Using the  particle.js library  in the JavaScript project. 
   
   

用户可以使用 color 属性来更改包含该对象作为值的粒子的颜色。

用户可以使用 Particle.JS 库中的以下形状的粒子。

• “多边形”

• “三角形”

• “圆圈”

• “边缘”/“方形”

• “图像”/“图像”

• “星星”

• “字符”/“字符”

示例

在下面的示例中，我们已将多边形形状添加到粒子中。此外，我们还使用 size 属性更改了粒子的大小。此外，我们还为粒子本身添加了动画，增加和减小了用户可以在输出中观察到的粒子大小。

   
   



   

      
Using the  particle.js library  in the JavaScript project. 
   
   

用户学习了在 JavaScript 项目中使用 keywords.js 库。但是，用户可以在本地计算机上安装particle.js库并使用路径导入。每当用户想要将 Particle.js 库与 NodeJS 应用程序一起使用时，他们应该使用 NPM 命令安装它。

以上是如何在 JavaScript 项目中使用 Particle.js？的详细内容。更多信息请关注PHP中文网其他相关文章！