Particles.js作者GIT:https://github.com/VincentGarreau/particles.js/
前言
今天我們來介紹如何透過Elementor使用Particles.js背景,市面上已有插件去做Particles.js效果,但一般都需要收費除此之外由於眾所周知插件越多速度越慢,所以我們將不會教導大家使用第三方插件去使用Particles.js。
什麼是Particles.js? Particles.js屬於現在很熱門的能夠建立特殊效果背景的JavaScript,GIT上的星星數更高達24.5k,此JavaScript總共提供了五種背景,而每種都能夠再獨立去設計,能夠透過作者的GUI界面調整效果。
馬上開始本次的教程!
1. 產生particles樣式
首先,讓我們來看看該如何生成和定制你的particles。
- 進入作者所提供的GUI界面生成。 (https://vincentgarreau.com/particles.js/#default)
- 然後你就會看到右上角的控制面板
- 按你的喜好設置,設置過程就不詳細說明了,歡迎慢慢體驗。
- 最後設置好一切就點擊 Download current config(json)
- 然後你就會得到了一個json檔案,把它留起來,我們下一步會使用。
2. 將Particles.js新增到Elementor
好的,現在我們有了所需要的代碼,讓我們前往你想要更改的Elementor頁面。
1. 新增HTML部件到頁面中的任何地方
2. 參考以下代碼並修改後複製到HTML部件中
<style>
.particles-js-canvas-el {
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
top: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS("particles-js",
// 把上一步的json設定檔貼在此位置 //
);
</script>
3. 然後到想要新增Particles效果的section新增一個ID=particles-js
最後你就能夠看到Particles.js效果。
是不是很簡單呢,馬上下載 Elementor 嘗試這麼摩登的效果。
如果您喜歡這篇文章,請追蹤及點讚我們的Facebook給我們支持。