使い方
リンク先はデモも用意されていたり日本語だったりなので、そちらを見てもらった方が確実だと思いますが。。
html
<div class="js-morphing"> <img src="img/01.jpg" alt=""> </div>
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="../jquery.morphing.js"></script> <script> $(function(){ $('.js-morphing').morphing({ numVert: 6, //円の粒度 spring: 0.005, //バネ運動の動作数値 friction: 0.90, //摩擦運動の動作数値 radius: 80, //Canvasの表示半径 fps: 45 }); }); </script>
オプションもいろいろ設定できるようです。
Canvasを使用しているのでブラウザはhtml5対応以上ですね。
なかなか面白いですね。