Sandbox › AK²ENGINE DOCS
AK²ENGINE DOCS

エフェクトプラグイン

AK²Engine が提供するエフェクトプラグイン一覧。背景・カーソル・モーション・テキストの4グループに分類されます。

← 目次に戻る

エフェクトの分類

AK²Engine のエフェクトプラグインは以下の4グループに分類されます。

グループ 概要 種類数
背景エフェクト セクションに Canvas アニメーション背景を追加 27種
カーソルエフェクト マウスカーソルをカスタム表示 1種
モーションエフェクト スクロール連動のアニメーション 2種
テキストエフェクト 文字アニメーション 1種

背景エフェクト

背景エフェクトとは

背景エフェクトは、セクション（sections[] の各ブロック）に対して Canvas ベースのアニメーション背景を付与するプラグインです。

セクション外（ページ front-matter）に指定すればページ全体背景としても使用できます。ただし基本的な用途はセクション単位の使用を想定しています。

適用方法

effects: にクラス名を配列で指定します。セクション内でもページ front-matter でも、同じクラス名を使います。

セクションへの適用（推奨）

sections[].effects[] YAML 配列で指定します。

文字列記法（オプションなし）
sections:
  - type: hero
    title: "タイトル"
    effects:
      - SnowEffect
      - FireflyEffect
オブジェクト記法（オプション指定あり）
sections:
  - type: hero
    title: "タイトル"
    effects:
      - name: SnowEffect
        count: 20
        alpha: 1.5
        hue: 210
        lightness: 70
      - name: FireflyEffect
        interactive: false

複数エフェクトを重ねる場合、mix-blend-mode: screen ですべてのエフェクトが合成表示されます。

ページ全体への適用

front-matter の effects: に指定します。base.njk が AK2.register(new SnowEffect()) を自動呼び出します。

---
layout: layouts/base.njk
title: My Page
effects:
  - SnowEffect
  - AuroraEffect
---

CSS カスタム変数によるパラメーター調整

各エフェクトは CSS カスタムプロパティで調整できます。変数名は --{エフェクト識別子}-{パラメーター名} が基本パターンです。

:root {
  --snow-count: 200;
  --snow-alpha: 0.9;
  --aurora-alpha: 0.3;
  --firefly-hue: 270;
}

背景エフェクト一覧

各エフェクト名をクリックすると詳細ページを確認できます。

エフェクト名 説明
AuroraEffect 青〜紫〜緑の光が揺らめくオーロラ。幻想的・神秘的な演出
CherryBlossomEffect ピンクの花びらが舞い落ちる。春・和風サイト
CloudEffect 白い雲が緩やかに流れる。空・清潔感・爽やかさ
EmberEffect 炎の火の粉が上方向に漂う。情熱・夏祭り
FireflyEffect 光の点（ホタル）が光跡を描く。夏・幻想的
GridConstruction ページ開幕時にグリッド線が展開するローディング演出★
LeafEffect 緑の葉が揺れながら漂う。ナチュラル・エコ系
LeafFallEffect 葉が落下する秋のシーン
LightningEffect 稲妻が走る。エネルギッシュ・テック・ロック系
GridEffect 細い線が動くグリッドパターン。テクニカル・ミニマル
MapleLeafEffect もみじの葉が舞う。紅葉・日本の秋
MomijiEffect もみじ（赤みが強いバリエーション）
ParticleEffect Three.js による3Dパーティクル群（useThreeJS: true 必須）
ProjectorFlickerEffect 古い映写機のフリッカー。レトロ・アナログ感
RainEffect 縦に落ちる雨のライン。梅雨・夜の雨
RippleEffect クリックで水面に波紋が広がる。水・清涼感
SakuraEffect 桜の花びらが舞う（フルバリエーション）。春
ShimmerEffect キラキラした光の粒。高級感・ジュエリー
SnowEffect 白い雪がゆっくり降る。冬・クリスマス
SparksEffect 火花・スパークがはじける。工場・ものづくり
StarFieldEffect 星空。夜・宇宙・ロマンティック
StarSpeedEffect 星が高速で流れるワープ演出。SF・スピード感
StatusUpEffect ゲームのステータスアップ表示。ゲーミング・デジタル
SteamEffect 湯気が立ち上る。温泉・カフェ・温かみ
VintageFilmEffect フィルムグレイン・スクラッチノイズ。レトロ・映画的
WaveRippleEffect ウェーブと波紋の水面表現。海・プール
WaveEffect なめらかな波形。海・音楽・リズム感

★ GridConstruction は完了時に ak2:grid-ready カスタムイベントを発行します。useLogoAnimation: true はこのイベントをリッスンして SVG ストロークアニメーションを開始します。

カーソルエフェクト

cursorMagnetic

data-cursor-area 内でマウスカーソルをカスタム表示に切り替えます。data-magnetic を付与した要素はカーソルに吸い付くように動きます。

{% from "effect-cursor-magnetic/effect-cursor-magnetic.njk" import cursorMagnetic %}
{# body 直下に1回だけ配置 #}
{{ cursorMagnetic() }}

<section data-cursor-area>
  <button data-magnetic type="button">Magnetic Button</button>
</section>

1ページあたり1回のみ呼び出してください。

モーションエフェクト

MagneticEffect（磁力エフェクト）

.btn-magnetic クラスを持つ要素をマウスカーソルに引き寄せます。

パラメーター デフォルト 説明
strength 0.3 引力の強さ（0〜1） 
new MagneticEffect()                    // デフォルト（strength: 0.3）
new MagneticEffect({ strength: 0.5 })  // 引力を強める

CounterAnimation（数値カウントアップ）

.counter-number クラスの要素がビューポートに入ると、数値が 0 から目標値までカウントアップします。

HTML 属性 デフォルト 説明
data-target — 目標値（必須）
data-duration 2000 アニメーション時間（ms）
data-suffix '' 数値の後ろに付加する文字列 
<span class="counter-number" data-target="1000" data-duration="2000" data-suffix="+"></span>

effect-motion-fadein（フェードイン）

.fade-in-section クラスの要素がビューポートに入るとフェードインします。パラメーター設定は不要で、ページ読み込み時に自動起動します。

HTML 属性 デフォルト 説明
data-delay 0 遅延時間（ms） 
<div class="fade-in-section" data-delay="200">...</div>

テキストエフェクト

TypeWriter（タイピングアニメーション）

文字列を1文字ずつタイピング → 削除 → 繰り返しで表示するタイプライターエフェクトです。

パラメーター デフォルト 説明
speed 80 タイピング速度（ms/文字）
deleteSpeed 40 削除速度（ms/文字）
waitTime 2200 表示待機時間（ms）
placeholder — テキスト幅確保用の要素（任意） 
new TypeWriter({ speed: 60, deleteSpeed: 30, waitTime: 1800 })

カスタムエフェクトの作成

AK²Engine インターフェースを実装したクラスを作成し、window に登録することでカスタムエフェクトを追加できます。

class MyEffect {
  constructor(options = {}) {
    this.options = options;  // YAMLオプションを受け取る
  }
  init(canvas, ctx) {
    this.canvas = canvas;
    this.ctx = ctx;
    // CSS変数またはYAMLオプションから設定を読み取る
    const style = getComputedStyle(document.documentElement);
    this.count = this.options.count
      ?? parseInt(style.getPropertyValue('--my-count') || '100');
  }
  update(dt) { /* パーティクル更新（dt: 前フレームからの経過秒数） */ }
  draw(ctx)  { /* 描画処理 */ }
  onResize(w, h) { /* キャンバスサイズ変更時の処理 */ }
}
window.MyEffect = MyEffect;

セクション個別エフェクトでYAMLパラメーターを受け取るには、constructor(options = {}) を実装してください。

前のページ: ← ボタンプラグイン | ↑ 目次 | 次のページ: Eleventy設定 →