如何在 JavaScript 專案中使用 Particle.js？-js教程-PHP中文網

如何在 JavaScript 專案中使用 Particle.js？

WBOY

發布： 2023-09-11 23:33:10

轉載

1078 人瀏覽過

如何在 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。我們將該物件作為包含粒子屬性的第二個參數傳遞。

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

登入後複製

在輸出中，使用者可以觀察 div 元素中的粒子。
範例

下面的範例將為粒子添加運動和顏色。使用者可以使用 move 屬性來移動粒子。「move」屬性將值作為一個對象，其中包含帶有布林值的啟用屬性。

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

登入後複製

使用者可以使用 color 屬性來變更包含該物件作為值的粒子的顏色。

使用者可以使用 Particle.JS 庫中的以下形狀的粒子。

「多邊形」
#「三角形」
#「圓圈」
#「邊緣」/「方形」
“圖像”/“圖像”
「星星」
#“字元”/“字元”

範例

在下面的範例中，我們已將多邊形形狀新增到粒子中。此外，我們還使用 size 屬性更改了粒子的大小。此外，我們還為粒子本身添加了動畫，增加並減少了使用者可以在輸出中觀察到的粒子大小。

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

登入後複製

使用者學習了在 JavaScript 專案中使用 keywords.js 函式庫。但是，使用者可以在本機電腦上安裝particle.js庫並使用路徑導入。每當使用者想要將 Particle.js 函式庫與 NodeJS 應用程式一起使用時，他們應該使用 NPM 命令安裝它。

以上是如何在 JavaScript 專案中使用 Particle.js？的詳細內容。更多資訊請關注PHP中文網其他相關文章！