背景デコレーション
bgGlow
放射状のグロー光源を配置し、緩やかに呼吸するように輝く背景装飾。スポットライト的な演出に。
デモ
概要
radial-gradient で描く放射状グロー光源が、glow-pulse アニメーションで緩やかに明滅します。1〜2点のグロー光源を重ねることで、光が差し込むような演出が可能です。
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
glows |
配列 | グロー光源の配列 |
glows[].x |
文字列 | 水平位置（省略時 "50%"） |
glows[].y |
文字列 | 垂直位置（省略時 "50%"） |
glows[].color |
文字列 | グロー色（hsla / rgba 推奨） |
glows[].size |
文字列 | グロー直径（省略時 "600px"） |
glows[].delay |
文字列 | アニメーション遅延（例: "-3s"） |
使用例
{% from "components/macros.njk" import bgGlow %}
{{ bgGlow([
{ x: "30%", y: "40%", color: "rgba(147,197,253,0.4)", size: "700px" },
{ x: "75%", y: "65%", color: "rgba(186,230,253,0.3)", size: "500px", delay: "-3s" }
]) }}
CSS クラス
| クラス | 説明 |
|---|---|
.bg-glow-layer |
コンテナ（position: absolute; overflow: hidden） |
.bg-glow-item |
個々のグロー（border-radius: 50%; glow-pulse アニメーション） |