まるで水みたいなぷよぷよとした動きを表現できるjQueryプラグイン「jquery.morphing.js」

jquery.morphing.jsは、まるで水のようなぷよぷよとした動きを表現できるjQueryプラグインです。

動きについては、以下デモページよりご確認ください。

デモページを見る

jquery.morphing.jsの使い方

jquery.morphing.jsのダウンロードと設置

GitHubよりjquery.morphing.jsのをダウンロードします。

ダウンロードしたファイルを解凍し、jquery.morphing.min.jsをサーバーにアップロードしてください。

jQueryとjquery.morphing.jsの読み込み

</body>の直前に以下を追加して、jQueryとjquery.morphing.jsを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.morphing.min.js"></script>

jquery.morphing.min.jsのファイルパスは適宜変更してください。

HTMLのマークアップ

HTMLは非常にシンプルです。以下のようにmorphingというクラスで画像を内包します。

<div class="morphing">
 <img src="sample.jpg" alt="">
</div>

上記ではmorphingとしましたが、クラス名は何でもOKです。

スクリプトの記述

以下スクリプトを</body>の直前に記述します。jQueryとjquery.morphing.jsを読み込んだ後に記述するようにしてください。

<script>
 $(function(){
 let $hoge = $('.morphing');
 $hoge.morphing({
 numVert: 8,
 spring: 0.005,
 friction: 0.9,
 radius: 200,
 fps: 100
 });
 });
</script>

jquery.morphing.jsのオプション

jquery.morphing.jsのでは、以下のオプションが利用可能です。

値を変更することで、環境に合わせて調整しましょう。

あとがき

とても簡単に不思議な動きを実装できますね。ちょっと変わった動きを表現したいと思ったら、ぜひお試しください。