Particles.js：為Web專案增添動態粒子效果

雨太阳發表於2024-05-30
JSWeb

Particles.js：為Web專案增添動態粒子效果

示例

示例1

示例2

介紹

Particles.js是一個輕量級的JavaScript庫，用於在Web頁面上建立和管理動態粒子效果。它允許開發者透過簡單的配置檔案實現複雜的動畫效果，為網頁增添視覺吸引力。粒子可以是點、線、影像等，能夠根據使用者互動進行動態變化，Particles.js能夠極大地增強使用者體驗。

使用場景

  1. 網頁背景：Particles.js常用於建立動態背景，使網頁更加生動。例如，科技公司的網站可以使用類似星空或資料流動的效果來增強科技感。

  2. 互動動畫：透過響應使用者的滑鼠懸停、點選等操作，Particles.js可以建立互動效果，增加使用者參與感。例如，使用者滑鼠懸停在按鈕上時，粒子可以向四周擴散。

  3. 引導頁面和登陸頁：使用粒子效果可以提升登陸頁的視覺吸引力，讓使用者在進入網站時留下深刻印象。

  4. 視覺演示和資料展示：在展示資料時，動態粒子效果可以用來表示資料點或動態變化，增強資料的視覺化表現力。

安裝和配置

使用Particles.js非常簡單。首先，你需要在專案中引入庫檔案，可以透過CDN或直接下載檔案：

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

接下來，在HTML中新增一個容器，用於展示粒子效果：

<div id="particles-js"></div>

然後，透過JavaScript初始化Particles.js：

particlesJS.load('particles-js', 'path/to/particles.json', function() {
  console.log('Particles.js loaded - callback');
});

配置檔案

Particles.js透過JSON檔案進行配置，這個檔案定義了粒子的數量、顏色、形狀、大小、動畫效果等。以下是一個簡單的配置示例：

{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
  },
  "retina_detect": true
}

高階用法

Particles.js不僅僅提供基本的粒子效果，還支援許多高階特性，例如響應使用者互動、動態載入配置、甚至與其他動畫庫整合。以下是一些高階用法的示例：

1. 響應使用者互動

你可以配置粒子在使用者懸停或點選時產生不同的效果。例如，在使用者懸停時粒子可以避開滑鼠：

"interactivity": {
  "events": {
    "onhover": {
      "enable": true,
      "mode": "repulse"
    }
  }
}

2. 動態載入配置

可以使用JavaScript在執行時載入不同的配置，以實現不同的視覺效果：

particlesJS.load('particles-js', 'path/to/another-config.json', function() {
  console.log('New configuration loaded');
});

3. 與其他動畫庫整合

Particles.js可以與其他動畫庫如GreenSock (GSAP) 整合，以實現更加複雜和精美的動畫效果。例如，可以使用GSAP來控制粒子的屬性：

gsap.to('#particles-js canvas', { duration: 2, opacity: 0.5 });

Particles.js 案例與總結

案例

1. 科技公司主頁

某科技公司希望其網站首頁展現科技感和現代感，於是使用Particles.js建立了一個動態背景，模擬宇宙中的星空效果。粒子隨著滑鼠移動而運動，並在點選時產生連線效果，增加了互動性。

配置示例：

{
  "particles": {
    "number": {
      "value": 100
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": 0.5
    },
    "size": {
      "value": 3
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6
    }
  },
  "interactivity": {
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      }
    }
  },
  "retina_detect": true
}

科技公司主頁 示例圖

2. 創意設計公司登陸頁

一家創意設計公司在其登陸頁上使用Particles.js，以增強視覺效果。頁面背景使用了彩色粒子，並設定了粒子隨機移動和碰撞效果，體現了公司的創意和活力。

配置示例：

{
  "particles": {
    "number": {
      "value": 80
    },
    "color": {
      "value": ["#ff0000", "#00ff00", "#0000ff"]
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": 0.8
    },
    "size": {
      "value": 4
    },
    "move": {
      "enable": true,
      "speed": 3,
      "bounce": true
    }
  },
  "interactivity": {
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      }
    }
  },
  "retina_detect": true
}

創意設計公司登陸頁 示例圖

3. 資料視覺化平臺

一個資料視覺化平臺使用Particles.js來展示實時資料變化。每個粒子代表一個資料點，並根據資料變化動態調整位置和顏色，使用者可以透過互動瞭解資料的實時變化。

配置示例：

{
  "particles": {
    "number": {
      "value": 50
    },
    "color": {
      "value": "#00ff00"
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": 0.6
    },
    "size": {
      "value": 5
    },
    "move": {
      "enable": true,
      "speed": 2,
      "direction": "bottom"
    }
  },
  "interactivity": {
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      }
    }
  },
  "retina_detect": true
}

資料視覺化平臺 示例圖

總結

Particles.js是一款強大且靈活的JavaScript庫，能夠為Web頁面增添動態和互動的視覺效果。無論是用於背景、互動動畫、引導頁還是資料展示，Particles.js都能夠透過簡單的配置提供豐富的視覺體驗。對於希望提升網站視覺效果和使用者體驗的開發者來說，Particles.js是一個不可或缺的工具。透過適當的設計和配置，Particles.js可以幫助網站在競爭激烈的網際網路中脫穎而出。

參考資料

  • [Particles.js 官方網站]

    • https://vincentgarreau.com/particles.js/

  • [Particles.js GitHub 倉庫]

    • https://github.com/VincentGarreau/particles.js

歡迎關注，在此感謝大家了 ~

相關文章