首頁 >web前端 >js教程 >如何在 JavaScript 專案中使用 Particle.js?

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

WBOY
WBOY轉載
2023-09-11 23:33:101100瀏覽

如何在 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中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除