クリックで卵がパカっと割れるようなjquery

表題の通りなのですが、クリックイベントで、卵が両サイドにパカっと割れるような動作を再現したいです。

断面はギザギザが好ましいののですが、サンプルなどあれば是非URLを教えて下さい。

マウスオーバーイベントですが
http://www.oto-con.com/wp-content/demo/jquery-mo …
こんな感じが動きとしては近いです。
もうすこし、パキっと動かしたいのですが・・・

宜しくお願いします。

No.1 回答者： fujillin 回答日時： 2013/12/17 17:01

サンプルに挙げられている感じでよいのであれば、左右の画像をそのまま断面がギザギザの左と右に置き換えれば、ほぼいけるのではないでしょうか？

断面がギザギザであっても、最初は二つの透明png等をうまくつながるように表示しておけばよろしいかと思います。


＞パキっと動かしたいのですが・・・
ご提示のサイトではjQueryを利用していますので、動きそのものは同じで速度を変えたいだけなら、アニメーションのdurationを変更すればよろしです。
動きは同じでも速度にムラのある感じ（エフェクト）にしたいのであれば、jQueryのeasingを利用することで比較的簡単に実現可能です。
　http://alphasis.info/2011/05/jquery-easing-plugin/


割れる感じを表現するのに画像の回転も組合せて表したい場合は、HTML5のcanvasを利用するのが良さそうです。
仕組みは同じで画像を表示しておいてアニメーションすれば良いのですが、canvasでは表示軸をそれぞれ回転させることができたと記憶していますので、かなり違った印象にすることもできると思います。
　http://www.html5.jp/canvas/ref.html