エフェクト（v2）

← 目次に戻る

エフェクトの使い方

背景エフェクトは Canvas 上に描画されるアニメーションです。ページ全体またはセクション単位で使用できます。

ページ全体にエフェクトをかける

---
effects:
  - BgEffectSnow
---

body 直下に固定の canvas が生成され、ページ全体にエフェクトが表示されます。

セクション単位でエフェクトをかける

---
sections:
  - template: hero-basic
    title: "タイトル"
    effects:
      - name: BgEffectSnow
        count: 50
        alpha: 1.2
---

セクション内に canvas が配置され、そのセクションだけにエフェクトが表示されます。パラメータでカスタマイズできます。

同じエフェクトを複数箇所で使う

パラメータ違いで同じエフェクトを複数のセクションに配置できます。各インスタンスは独立して動作するためコンフリクトしません。

sections:
  - template: hero-basic
    effects:
      - name: BgEffectSnow
        count: 80
        alpha: 1.0
  - template: cta-basic
    effects:
      - name: BgEffectSnow
        count: 20
        alpha: 0.5

エフェクトファイルの配置

エフェクトの JS ファイルはプロジェクトの _effects/ ディレクトリに配置します。

src/_effects/
  bg-effect-snow.js
  bg-effect-aurora.js
  bg-effect-firefly.js
  ...

ファイル名は kebab-case、クラス名は PascalCase です。

エフェクト一覧

CLI で npx ak2 list effects を実行すると全エフェクトを確認できます。

エフェクトの共通パラメータ

各エフェクトは CSS 変数またはフロントマターのオプションでカスタマイズできます。フロントマターのオプションが CSS 変数より優先されます。

effects:
  - name: BgEffectSnow
    count: 40        # 粒子数
    alpha: 1.2       # アルファ係数
    hue: 210         # 色相
    lightness: 55    # 明度

パラメータはエフェクトごとに異なります。各エフェクトの JS ファイル冒頭にパラメータ仕様がコメントで記載されています。

エフェクトの自作

_effects/ に JS ファイルを追加するだけです。以下のインターフェイスを実装してください。

class BgEffectMyCustom {
  constructor(options = {}) {
    // options: フロントマターから渡されるパラメータ
  }
  init(canvas, ctx) {
    // Canvas とコンテキストを受け取り初期化
  }
  update(dt) {
    // フレームごとの状態更新（dt = 経過ミリ秒）
  }
  draw(ctx) {
    // Canvas への描画
  }
  onResize(w, h) {
    // リサイズ時に呼ばれる
  }
}
window.BgEffectMyCustom = BgEffectMyCustom;

ファイル名は bg-effect-my-custom.js（kebab-case）にしてください。

前のページ: ← v2 アーキテクチャ概要 | ↑ 目次 | CLI ツール →