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

Particles.js是一个轻量级的 JavaScript 库，用于创建看起来像多边形顶点的粒子。我们还可以通过将鼠标悬停在粒子上来进行交互，并通过单击粒子来创建更多粒子。

这是particle.js的例子

我们可以在我们的投资组合中使用这个库，这肯定会吸引很多用户并且在网站上看起来不错。

安装过程：

1.从以下链接下载particles.js库，解压并将其复制到您的项目文件夹中。 https://vincentgarreau.com/particles.js/

2. 创建两个文件index.html和style.css。

在 index.html文件中写入以下代码。

HTML

  

    particles.js
  
    
    

  

    
    
        
            GeeksforGeeks
            
                A computer Science 
                portal for geeks
            
        
    
  
    
    
    
    
    

  

文件名：style.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Open Sans', 'Helvetica Neue', sans-serif;
}
.heading {
    position: absolute;
    text-align: center;
    top: 30%;
    width: 100%;
}
.heading h1 {
    color: limegreen;
    font-size: 70px;
}
.heading h3 {
    color: wheat;
    font-size: 20px;
}
#particles-js {
    background: black;
    height: 100vh;
}

3. 将上述代码分别保存在各自的文件中并运行index.html文件。

注意：如果您使用的是节点应用程序，那么我们可以通过以下命令简单地下载particles.js节点模块。

npm install particles.js

并从node_modules文件夹中导入particles.js和app.js文件，编写html代码。

HTML

  

    particles.js
    
    

  

    
    
        
            GeeksforGeeks
            A computer Science portal for geeks
        
    
  
    
    
    
    
    

  

我们可以通过修改 app.js来改变粒子的属性和交互性，然后看看魔法。

输出：