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

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 11, 2023 pm 11:33 PM

如何在 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 id="Using-the-i-particle-js-library-i-in-the-JavaScript-project"> 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 id="Using-the-i-particle-js-library-i-in-the-JavaScript-project"> 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 id="Using-the-i-particle-js-library-i-in-the-JavaScript-project">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。如有侵權，請聯絡admin@php.cn刪除

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。