イメージなんかをhoverすると、波紋が広がるエフェクトが簡単に実装できるripples.jsをメモ
ripples.jsをダウンロードする
まず、ripples.jsをダウンロードしましょう。
プラグインの設定
続いて、jqueryとripples-min.jsを設定しましょう
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/jquery.ripples-min.js"></script>
html
htmlを記述します。
<main> <div class="ripples-1"></div> </main>
css
cssを記述します。
.ripples-1{
background-image: url('../img/1.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width:800px;
height:533px;
margin:50px 0px;
}
js
jsを記述します。
function.js
$(function(){
let $ripp = $('.ripples-1');
$ripp.ripples({
resolution: 100,
dropRadius: 20,
perturbance: 0.1
});
});
まずCSSで背景設定します。そこで使用したclassをjavascriptに設定します。
パラメータの内容
パラメータの種類は以下のようになっています。
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| resolution | integer | 256 | 解像度です。レンダリングするWebGLテクスチャの幅と高さになり、この値が大きいほどレンダリングがスムーズになり、リップルの伝播が遅くなります。 |
| dropRadius | float | 20 | ドロップサイズです。キャンバス上でマウスをクリックまたは移動した結果のドロップのサイズになります。（ピクセル単位）。 |
| perturbance | float | 0.03 | 屈折量です。0は、屈折がありません。 |
| imageUrl | string | null | 背景画像のURLを指定します。存在しない場合、プラグインはCSSのbackground-imageを代わりに使用します。Data-URIもOKです。 |
| interactive | bool | true | マウスのクリックとマウスの動きで効果をトリガーするか設定します。 |
この設定だけで簡単に実装可能です。
ですが、注意点もあります。
●スマホでに対応していません。
●ローカルでは機能しない？
スマホの場合は必ずしも必要なエフェクトではないので良いんですが、どうやらローカル環境ではプレビューできないようなんですね。
データをサーバーにアップする必要があります。
以上です。
今回パラメータを変更して3パターンほどでもを用意しました。
