顧名思義，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？的詳細內容，更多請關注www.92cms.cn其它相關文章！
