v2 エフェクト
BgEffectWave
なめらかな波形が複数レイヤーで揺れるエフェクト。海・音楽・リズム感のある演出に。
PREVIEW
デモ
概要
3層の半透明な波形（サイン波）がそれぞれ異なる速度・位相で流れるエフェクトです。音楽・音声・イコライザー、または海の波をイメージした演出に適しています。BgEffectWaveRipple が水面の波紋なのに対し、BgEffectWave は横方向に流れる波形です。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--wave-alpha |
1.0 |
全レイヤーのアルファ係数 |
内部仕様
| 項目 | 値 |
|---|---|
| 波レイヤー数 | 3 |
| 各レイヤー | 異なる速度・振幅・色で描画 |
使用例
セクションへの適用
sections:
- template: hero
title: "タイトル"
effects:
- BgEffectWave
ページ全体への適用
---
layout: layouts/base.njk
effects:
- BgEffectWave
---
CSS 変数での調整
:root {
--wave-alpha: 0.7; /* 波を透明に */
}