如何透過Elementor使用Particles.js背景教學 (Free/Pro)

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。

  1. 進入作者所提供的GUI界面生成。 (https://vincentgarreau.com/particles.js/#default)
  2. 然後你就會看到右上角的控制面板
  3. 按你的喜好設置，設置過程就不詳細說明了，歡迎慢慢體驗。
  4. 最後設置好一切就點擊 Download current config(json)
  5. 然後你就會得到了一個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給我們支持。

分享此文章到

更多有趣文章