v2 エフェクト

BgEffectRipple

クリックした場所から水面に波紋が広がるインタラクティブエフェクト。水・清涼感・温泉系サイトに。

PREVIEW

← v2 エフェクト一覧

デモ

概要

クリック（またはタップ）した地点から同心円状の波紋が広がるインタラクティブエフェクトです。最大拡張半径は 180px で、3色のバリエーションがランダムに選ばれます。水・池・温泉・スパ系サイトのインタラクション演出として特に効果的です。

CSS カスタム変数

このエフェクトに調整可能な CSS カスタム変数はありません。

内部仕様

項目	値
最大拡張半径	`180px`
カラーバリエーション	3色（内部定義）
トリガー	クリック / タップ

使用例

セクションへの適用

sections:
  - template: hero
    title: "タイトル"
    effects:
      - BgEffectRipple

ページ全体への適用

---
layout: layouts/base.njk
effects:
  - BgEffectRipple
---

← v2 エフェクト一覧 | ↑ 目次