こんにちわ！

今回は以下のようなマウスに合わせた波紋のエフェクトを簡単に実装する方法をご紹介したいと思います。

「jquery.ripples.js」というjQueryのプラグインを使って実装していきます。

実装

まずGithubからプラグインをダウンロードします。

ダウンロードしたファイルを開き「dist」ファイルから「jquery.ripples-min.js」を取り出し自分のプロジェクトファイルの中にいれます。

head内か</body>タグ直前にjQuery→ripples.jsの順番に読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="/js/jquery.ripples-min.js"></script>

HTMLとCSS

HTML

<div class="content"></div>

contentクラスに背景画像を設定します。

.content {
    width: 100vw;
    height: 70vh;
    background: url(/images/minamo.jpg) no-repeat center center;
    background-size: cover;
}

JavaScript

次に新しくjsファイルを用意してください。

今回はscript.jsというファイルを用意しました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="/js/jquery.ripples-min.js"></script>
<script src="/js/script.js"></script>

htmlで忘れずに読み込みましょう。

script.js

$(document).ready(function() {
    $('.content').ripples({ //要素の指定
        resolution: 600, //波紋の広がる速さ
        dropRadius: 10, //波紋の大きさ
        perturbance: 0.1 //波紋の屈折量
    });
});

コードは以上になります。

$('.content').ripples()

ここで波紋を適用したい要素を指定しています。

あとのコードはオプションになります。

オプションの詳しい内容などはREADMEを参照していただけると。

まとめ

カーソルに合わせて波紋が表示されたでしょうか？

波紋の調節の仕方によって、いろいろな使い方ができると思います。

なかなか普通のサイトには取り入れる機会は少なそうですが、こんなのもあるんだくらいで覚えておくのもアリかと思います。

ではまた！