Number1
拡大スピードを指定 1以上の数値。大きいほど速い。
Number2
透過スピードを指定 1以上の整数。大きいほど速い。
Number3
最初の透明度を指定 0 – 100
String
色を指定 HEX ・ RGB ・ rgba() ※この場合はa(透明度)の要素は無効になる
●必須引数 ●オプション引数(省略可能)
記述例
$aniRipple(2, 1, 30, '#f00')
$aniRipple(2, 1, 30, 'rgb(255,0,0)')
$aniRipple(2, 1, 30, 'rgba(255,0,0,0.3)')
◆ ポインタの位置を取得するために $startMouseMonitor() を起動しておく
(例) <body onload="$startMouseMonitor()">
(例) <script>$startMouseMonitor()</script>
(例) <body onload="$startMouseMonitor()">
(例) <script>$startMouseMonitor()</script>
注意点
円形のNodeは、<body>直下にある最初の Element Node の子Nodeとして一時的に追加される。
動作サンプル
いろいろな設定で実行する。
HTML :
<script>$startMouseMonitor()</script>
<button type="button" onclick="$aniRipple(3,2,50,'#31b1bc')">青 #31b1bc</button>
<button type="button" onclick="$aniRipple(10,2,40,'rgb(222,0,76)')">赤 rgb(222,0,76)</button>
<button type="button" onclick="$aniRipple(6,1,60,'rgba(102,102,102,0.5)')">グレー rgba(102,102,102,0.5)</button>
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。