AK²Engine › ドキュメント › 背景デコレーション
ドキュメント

背景デコレーション

CSS + Nunjucks マクロで実装された軽量な背景装飾。Canvas 不要で手軽に装飾を追加できます。

← 目次に戻る

概要

背景デコレーションは、macros.njk のマクロとして提供される CSS ベースの背景装飾です。背景エフェクト（Canvas/JS）と異なり、JavaScript は不要で軽量に動作します。

項目 背景エフェクト（bg-effect） 背景デコレーション（bg-decoration）
実装 Canvas + JavaScript CSS + Nunjucks マクロ
アニメーション requestAnimationFrame CSS @keyframes
JS 依存 あり なし
適用方法 effects: 配列 マクロ呼び出し

適用方法

テンプレート内でマクロを直接呼び出します。セクションテンプレート（.njk）の中で使用してください。

{% from "components/macros.njk" import bgShapes, bgGlow, bgGrid, bgStreak %}
{# セクション内に配置 #}
{{ bgShapes([
  { top: "-50px", left: "-100px", w: "700px", h: "350px",
    c1: "rgba(219,234,254,0.5)", c2: "rgba(191,219,254,0.2)" }
]) }}

デコレーション一覧

デコレーション 効果 デモ
bgShapes ぼかしグラデーションBlob デモ →
bgGlow 放射状グロー光源 デモ →
bgGrid ドット / ライン / クロスパターン デモ →
bgStreak 斜めグラデーションバンド デモ →

↑ 目次