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

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

まるで水みたいなぷよぷよとした動きを表現できる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のでは、以下のオプションが利用可能です。

numVert 円の粒度。デフォルトは6
spring バネ運動の動作数値。デフォルトは0.005
friction 摩擦運動の動作数値。デフォルトは0.90
radius Canvasの表示半径。デフォルトは90
fps デフォルトは45

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

あとがき

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

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です