EFFECT PLUGINS / 背景エフェクト
WaveRippleEffect
波形と波紋を組み合わせた水面表現エフェクト。海・プール・アクアティック系サイトに。
概要
波紋が広がりながら波打つ水面を表現するエフェクトです。RippleEffect（クリック連動の波紋）とは異なり、こちらは自律的に波紋が発生し続けます。海・プール・温浴施設・ウォータースポーツ系のページに穏やかなアニメーション背景として機能します。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--wave-ripple-count |
6 |
最大波紋数 |
--wave-ripple-alpha |
1.0 |
アルファ係数 |
--wave-ripple-hue |
200 |
波紋の色相（0〜360）。200 で青系 |
使用例
セクションへの適用
sections:
- type: hero
title: "タイトル"
effects:
- WaveRippleEffect
ページ全体への適用
---
layout: layouts/base.njk
effects:
- WaveRippleEffect
---
CSS 変数での調整
:root {
--wave-ripple-count: 8;
--wave-ripple-alpha: 0.8;
--wave-ripple-hue: 180; /* シアン系 */
}