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

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

まるで水みたいなぷよぷよとした動きを表現できるjQueryプラグイン「jquery.morphing.js」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 欅坂46まとめブログです(^o^)
  • このエントリーをはてなブックマークに追加

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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。