BgEffectParticle

← v2 エフェクト一覧

デモ

• ライト背景デモ →
• ダーク背景デモ →

注意: このエフェクトは Three.js ベースです。デモページでは useThreeJS: true と mountId の指定が必要です。

概要

Three.js を使用した3Dパーティクルグリッドエフェクトです。マウスに反応してパーティクルが波のように揺れます。他のエフェクトとは独立した実装であり、useThreeJS: true front-matter 設定が必要です。

注意: Three.js を外部からロードする必要があります。useThreeJS: true を front-matter に設定してください。

YAML パラメーター

使用方法

front-matter 設定

---
layout: layouts/base.njk
useThreeJS: true
effects:
  - BgEffectParticle
---

HTML マウント要素

<div id="hero-particles" style="width:100%;height:100vh;"></div>

カスタム mountId の指定（セクション適用時）

sections:
  - template: hero
    effects:
      - name: BgEffectParticle
        mountId: my-canvas-container

内部仕様

← v2 エフェクト一覧 | ↑ 目次