背景デコレーション
bgStreak
斜めに走る半透明グラデーション帯がゆっくり横シフトする背景装飾。光の筋・躍動感のある演出に。
デモ
概要
斜め方向の linear-gradient 帯が streak-shift アニメーションでゆっくり横方向にシフトします。複数の帯を重ねることで、光の筋が流れるような印象的な演出が可能です。
パラメータ
| パラメータ | 型 | 説明 |
|---|---|---|
streaks |
配列 | グラデーション帯の配列 |
streaks[].angle |
文字列 | 帯の角度（省略時 "135deg"） |
streaks[].c1 |
文字列 | 帯の中心色 |
streaks[].c2 |
文字列 | 帯の端色（省略時 transparent） |
streaks[].opacity |
数値 | 透明度 0〜1（省略時 1） |
streaks[].delay |
文字列 | アニメーション遅延（例: "-10s"） |
使用例
{% from "components/macros.njk" import bgStreak %}
{{ bgStreak([
{ angle: "135deg", c1: "rgba(219,234,254,0.5)", c2: "rgba(191,219,254,0.1)", opacity: 0.8 },
{ angle: "150deg", c1: "rgba(207,250,254,0.35)", c2: "transparent", delay: "-10s" }
]) }}
CSS クラス
| クラス | 説明 |
|---|---|
.bg-streak-layer |
コンテナ（position: absolute; overflow: hidden） |
.bg-streak-item |
個々の帯（inset: -20% -10%; streak-shift アニメーション） |