![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
表題の通りなのですが、クリックイベントで、卵が両サイドにパカっと割れるような動作を再現したいです。
断面はギザギザが好ましいののですが、サンプルなどあれば是非URLを教えて下さい。
マウスオーバーイベントですが
http://www.oto-con.com/wp-content/demo/jquery-mo …
こんな感じが動きとしては近いです。
もうすこし、パキっと動かしたいのですが・・・
宜しくお願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
サンプルに挙げられている感じでよいのであれば、左右の画像をそのまま断面がギザギザの左と右に置き換えれば、ほぼいけるのではないでしょうか?
断面がギザギザであっても、最初は二つの透明png等をうまくつながるように表示しておけばよろしいかと思います。
>パキっと動かしたいのですが・・・
ご提示のサイトではjQueryを利用していますので、動きそのものは同じで速度を変えたいだけなら、アニメーションのdurationを変更すればよろしです。
動きは同じでも速度にムラのある感じ(エフェクト)にしたいのであれば、jQueryのeasingを利用することで比較的簡単に実現可能です。
http://alphasis.info/2011/05/jquery-easing-plugin/
割れる感じを表現するのに画像の回転も組合せて表したい場合は、HTML5のcanvasを利用するのが良さそうです。
仕組みは同じで画像を表示しておいてアニメーションすれば良いのですが、canvasでは表示軸をそれぞれ回転させることができたと記憶していますので、かなり違った印象にすることもできると思います。
http://www.html5.jp/canvas/ref.html
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- C言語・C++・C# [至急] Project Euler: #15 Lattice paths コード、入力、出力、解説 1 2022/09/24 02:34
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- その他(プログラミング・Web制作) pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
- PHP 画像ファイルの名前をそのままURLにする 3 2022/10/16 11:18
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
どなたかAtomエディタでjQuery ...
-
jquery画像ビューアー(IE6対応)
-
jsでhtmlを部分的にインクルー...
-
【Ping(ピング)】Windows10で...
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
Excelでワードアートや図を常に...
-
ウインドウを毎回同じ位置、大...
-
リストビューをスクロールさせ...
-
Javascript_submit()完了後に処...
-
エクセルのシート上に別のシー...
-
PDFを(htmlのように)無限に縦...
-
ハードウェアの安全な取り外し...
-
VBA ポップアップが表示された...
-
エクセルVBAでフォームのListbo...
-
一定時間おきにアラームやポッ...
-
「Cancel = True」とはどういう...
-
スクリプトって、何ですか?ど...
-
ツールバーやステータスバーな...
-
Excel操作 ウィンドウで出した...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
prototype.jsとjquery.jsの併用...
-
1ページ内に複数のjqueryのスラ...
-
jQueryでclientWidthが使えない
-
クリックで卵がパカっと割れる...
-
クリックすると画像が飛び出て...
-
jQuery1.3.2を使用しています。
-
jquery画像ビューアー(IE6対応)
-
jquery UIのdatepickerで和暦
-
背景画像のスライドショー
-
IE8のJavascriptアコーディオン...
-
既に複数行あるフォームの項目...
-
jqueryのプラグインdroppy.jsに...
-
マイページはどこを開くの
-
デジタル時計の時刻合わせの方...
-
ウインドウを毎回同じ位置、大...
-
エクセルのシート上に別のシー...
-
一定時間おきにアラームやポッ...
-
Excelでワードアートや図を常に...
-
Javascript_submit()完了後に処...
-
エクセルVBAでフォームのListbo...
おすすめ情報