背景デコレーション
bgShapes
大型の半透明グラデーション楕円がゆっくり回転・浮遊する背景装飾。柔らかい光彩感のある演出に。
デモ
概要
ぼかし（filter: blur(80px)）を掛けた大型グラデーション楕円が、rotate-float アニメーションでゆっくり回転しながら浮遊します。AK²Lab サイトのヒーローセクションでも使用している装飾です。
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
shapes |
配列 | 装飾図形の配列 |
shapes[].top |
文字列 | 上端からの位置（例: "-50px"） |
shapes[].left |
文字列 | 左端からの位置 |
shapes[].right |
文字列 | 右端からの位置 |
shapes[].bottom |
文字列 | 下端からの位置 |
shapes[].w |
文字列 | 幅（省略時 "800px"） |
shapes[].h |
文字列 | 高さ（省略時 "400px"） |
shapes[].c1 |
文字列 | グラデーション始点色 |
shapes[].c2 |
文字列 | グラデーション終点色（省略時 transparent） |
shapes[].delay |
文字列 | アニメーション遅延（例: "-5s"） |
shapes[].reverse |
真偽値 | true で逆方向アニメーション |
使用例
{% from "components/macros.njk" import bgShapes %}
{{ bgShapes([
{ top: "-50px", left: "-100px", w: "700px", h: "350px",
c1: "rgba(219,234,254,0.5)", c2: "rgba(191,219,254,0.2)" },
{ bottom: "-50px", right: "-150px", w: "600px", h: "400px",
c1: "rgba(224,242,254,0.5)", c2: "rgba(186,230,253,0.2)",
delay: "-5s", reverse: true }
]) }}
CSS クラス
| クラス | 説明 |
|---|---|
.bg-shape-layer |
コンテナ（position: absolute; overflow: hidden） |
.bg-shape-item |
個々の図形（filter: blur(80px); border-radius: 40px） |