js實現粒子特效，particles.js的使用

今天偶然看到了一個比較炫酷的js網頁。是粒子特效的，就試着用了用。一下是步驟，方便以后查看使用。

1.在網站下載源碼https://github.com/VincentGarreau/particles.js

2.下載下來是一個壓縮包，解壓后有很多文件，最少需要app.js，particles.js，stats.js這三個文件才可以實現最基本功能

3.在把其中的index.html嵌入到自己的web項目中，並且替換其中的目錄就可以了。

其中最重要的一點是，index.html中的<script>位置挪到div的前面，否則就不顯示了，親測！

<!-- particles.js container -->
<div id="particles-js">

</div>
<div id="login">
<form id="login" action="checkLogin.jsp" onsubmit="return validateForm(this);" method="get">
User&nbsp;name：<input id="userName" name="userName" onfocus="delTagUserName();"/><span id="tagUserName"></span><br/><br/>
Pass&nbsp;&nbsp;word：<input id="passWord" name="passWord" onfocus="delTagPassWord();"/><span id="tagPassWord"></span><br/>
<input type="submit" value="登陸"/>
</form>
</div>
<!-- scripts for particles這個不可以移動到前面去合並所有的script否則不會顯示的-->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(2);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>

結果展示如下，當鼠標經過時會擠走立體三角形。(登陸表單沒有設置樣式，有點丑0.0)