Ripple

中央から波紋が広がるアニメーションエフェクトサンプルです。

概要

中心点から複数の円を拡大しながら透明にすることで、波紋を表現しています。構成要素はシンプルで、下記のみです。

中心点
波紋の円
拡大アニメーション
フェードアウト

特徴

水面の波紋表現
軽量
Framer Motionのみで実装
Hero背景にも利用可能
Sci-Fi風UIにも相性が良い

このエフェクトは、通信中・ローディング・レーダーソナー・SF風背景・ヒーローセクションなどに非常に使いやすいです。特にdelayとdurationの組み合わせで印象が大きく変わります。

コードブロック

tsx

カスタマイズ

見出しの下に変更箇所のコードを載せています。

波紋の数の変更

tsx

{[...Array(9)].map((_, i) => (

Arrayを変更します。コードでは9個の波紋を生成しています。

波紋が発生した瞬間のサイズ変更

tsx


  initial={{
  width: 20,
  height: 20,
  opacity: 0.8,
}}

拡大アニメーション

tsx

animate={{
  width: [20, 900],
  height: [20, 900],
  opacity: [0.8, 0],
}}

円を拡大しながら透明にしています。

波紋同士の間隔

tsx

delay: i * 1

コードでは各波紋を1秒ずつ遅らせています。

カスタマイズ

波紋数変更

tsx

[...Array(9)]

増やすと密度が上がります。

tsx

[...Array(15)]

波紋の大きさ変更

tsx

width: [20, 900]
height: [20, 900]

大きくする場合

tsx

width: [20, 1200]
height: [20, 1200]

小さくする場合

tsx

width: [20, 500]
height: [20, 500]

波紋速度変更

tsx

duration: 9

速くする場合

tsx

duration: 5

遅くする場合

tsx

duration: 15

波紋間隔変更

tsx

delay: i * 1

波紋を多く出したい場合

tsx

delay: i * 0.5

ゆっくり出したい場合

tsx

delay: i * 2

線の太さ変更

tsx

border border-cyan-400/30

太くしたい場合

tsx

border-2 border-cyan-400/30

さらに太くする場合

tsx

border-4 border-cyan-400/30

波紋カラー変更

tsx

border-cyan-400/30

青

tsx

border-blue-400/30

紫

tsx

border-purple-400/30

ピンク

tsx

border-pink-400/30

中心点サイズ変更

tsx

"w-10 h-10"

大きくする場合

tsx

"w-16 h-16"

小さくする場合

tsx

"w-4 h-4"

中心点カラー変更

tsx

bg-cyan-400

変更例

tsx

bg-blue-400
bg-purple-400
bg-pink-400

ギャラリーへ戻る