ドキュメント
背景デコレーション
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 | 斜めグラデーションバンド | デモ → |