• 締切済み

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

表題の通りなのですが、クリックイベントで、卵が両サイドにパカっと割れるような動作を再現したいです。 断面はギザギザが好ましいののですが、サンプルなどあれば是非URLを教えて下さい。 マウスオーバーイベントですが http://www.oto-con.com/wp-content/demo/jquery-move-the-images-left-and-right/ こんな感じが動きとしては近いです。 もうすこし、パキっと動かしたいのですが・・・ 宜しくお願いします。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jquery スライダーが動かない

    昨日質問をしてなんとかクリアしたのですが、次はスライダーが動かなくて困っています。 問題のサイト：http://snapkidz.biz/wp/ 先日の質問：http://okwave.jp/qa/q7180952.html 教えて頂いたのを元に構築をしてメイン画像部分をスライダーにしようと思い構築したのですがうまくいきませんでした。 <!-- External files --> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <!-- Favicon, Thumbnail image --> <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico"> <?php wp_head(); ?> <!-- ======================================= スライダーテスト ======================================= --> <script type="text/javascript" src="http://snapkidz.biz/slider1/script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://snapkidz.biz/slider1/style.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div class="header" id="Top"> <h1><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" alt="Art・・"></h1> <div class="nav"> <ul> <li class="nav1"><a href=""></a></li> <li class="nav2"><a href=""></a></li> <li class="nav3"><a href=""></a></li> </ul> </div> <div class="siteImage"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image2.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image3.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image4.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image5.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> <a href="#" id="slide-prev">&laquo;</a><a href="#" id="slide-next">&raquo;</a> </div> <p><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" alt="" class="top" /></p> </div> でcssが html,body{margin:0;padding:0;} #wrapper{width:980px;margin:0 auto;position:relative;} div.header{border:sold 1px solid;} div.header h1{position:absolute;top:0;left:0;} div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;} div.header div.nav ul{display:block;height:70px;width:242px;text-align:right;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/blacknav.jpg);background-repeat:no-repeat;position:relative;left:737px;top:40px;} div.header div.nav ul li{display:inline;width:85px;} div.header div.siteImage{position:relative;width:100%;min-width:640px;} div.header div.siteImage img.top{position:absolute;top:-80px;left:400px;} です。 スライダーダウンロード元：http://unformedbuilding.com/articles/jquery-simple-loop-slider/ head部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか？ 宜しくお願い致します。

  • IEだとマウスオーバー時に画像の位置が下がる

    http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle demo⇒http://line25.com/wp-content/uploads/2010/slideshow/demo/demo.html こちらのサイトのスライドショーのスクリプトを使用したいのですが、 IEで見ると、マウスオーバー時にスライドの位置が下がります。 これを解消するにはどうすればよろしいでしょうか。 ご回答よろしくお願いいたします。

  • wordpressのjqueryが動かない

    wordpress3.8.1で作業しています。 会社のHPの作成用途でwordpressを使用しています。 何度か作成経験がありphpもなんとなく分かっているのですが、ここだけ解決せずです。 トップページにスライドショーのプラグインを入れたのですが動きません。 プラグインはWP-Cycleというプラグインです。 function.phpにはまだ何も記載していません。 header.phpはこんな感じの記載です。 ******************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="description" content="<?php bloginfo( 'description' ); ?>"> <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title> <link rel="shortcut icon" href="<img src="<?php bloginfo('template_url'); ?>/images/favicon.ico" /> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /> <?php wp_head(); ?> </head> <body> <a name="pagetop_here"></a> <div class="wrap"> <div class="header"> <h1 class="h_logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_logo.png"/></a></h1> <ul class="h_nav"> <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_01.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/news' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_02.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/about' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_03.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/works' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_04.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/faq' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_05.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/company' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_06.png"/></a></li> <li><a href="http://ameblo.jp/ecoblue-smile/" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/h_07.png"/></a></li> <li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>"><img src="<?php bloginfo('template_url'); ?>/images/h_08.png"/></a></li> </ul><!--h_nav--> </div><!--header--> ******************************************* <?php wp_head(); ?>を無効にして外部の jqueryを読み込むにすると、スライドはおろか、縦に並んでしまいます。（cssが効いていないみたいです。） どこが原因なのかも分からないです。 ただ過去に同じheader.phpで同じプラグインが実装しています。 よろしくお願い致します。

    • ベストアンサー
    • PHP
  • jQueryの働きがブラウザにより異なる。

    html, javascript(jQuery)の初歩を使ってウェブサイトのひな型を作成致しました。 目的は、index.htmlファイルにホームページ(HP)を記述し、必要に応じてサブのhtmlファイル（a.html, b.htmlなど）を読み出し、HPの所望の場所にその内容を表示するサイトを作ることです。 具体的には、ホームページをＴ字型に分割し、Tの上部にタイトルを表示、左側（左コラム）に項目を表示して、項目のどれかをクリックすると別のhtmlファイル(a.htmlやb.htmlなど)に記載された記事の内容を右側（右コラム）に表示させたいわけです。このＨＰのイメージ画像を添付させて頂きました。 下のプログラムをローカルで動かしてみましたところ、Firefox(v7.0.1)とSafari(v5.1.7)では所望の動作を致しました。一方、InternetExplorer(IE) (v11.0.x)とGoogleChrome(33.0.x)では、項目の表示までは所望の動作を致しましたが、項目をクリックしても、別htmlファイルの内容を右コラムに表示できませんでした。 このウェブを少なくとも上の4つのブラウザで動作させたいのですが、いわゆるクロスブラウザの問題なのか、あるいはもっと初歩的な誤りを犯しているのか、初心者ですので全くと云っていいほど見当がつきません。 まことにお手数ですが、誤りをご指摘頂き、正しい方法をご教示頂きたくお願い申し上げます。また併せて、この辺りのことについて分かり易い説明があるサイト、あるいは書籍をご紹介頂ければ幸いです。 以下はindex.htmlと関連プログラムの概要です。 １）index.htmlファイル ・ホームページ。 ・DOCTYPE宣言はhtml4.0Transitionalの互換モード。 ・<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> 　はjQueryライブラリーのアクセス宣言。 ・$(document).ready(function(){　から }) がjavascript (jQuery) ２）pagesフォルダ ・today.html, tomorrow.html, space.htmlのファイルを格納。 ・それぞれ項目の表題と記事を記述するファイル。 ３）ファイルのディレクトリ ・上の２つのファイルとフォルダはローカルのディスクの一つのフォルダに格納。 ・ディレクトリはそれぞれ 　/index.html, /index.html/pages, 以下はそれぞれのコードです。cssは別ファイルにせず直接htmlに書き込みました。 １）index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="keywords" content="HTML5,Web Audio API" /> <meta name="description" content="勉強会です。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>試験</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ //初期状態でのロードファイルを指定 $('#contentsBox').load('pages/today.html'); //クリックで各コンテンツを切り替え $('.switchButton').click(function(){ var loadContents = $(this).attr('title'); $('#contentsBox').load('pages/'+loadContents+'.html'); }); }); </script> </head> <body style="font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;"> <style type="text/css"> * { margin:0; padding:0;} ul {margin-left:35px; margin-top: 10px;} ul li {font-size:4mm; color:maroon; margin-top:1px; margin-bottom:1px;} ul a {color:maroon; } div.left-column{float:left; align:left; border-right:medium solid #800000; width:24.7%; height:100%; background-color:#f8dce0;}ul {margin-left:35px; margin-top: 10px;} </style> <div style="width:100%; background-color:#800000;"> <h1 align="center" style="padding-top:15px; padding-bottom:15px; color:white;"> ここにサイト名<br> </h1> </div> <div class="left-column"> <ul> <li class="switchButton" title="today">今日のできごと</li> <li class="switchButton" title="tomorrow">明日のお天気</li> <li class="switchButton" title="space">宇宙のはじまり</li> </ul> </div> <div id="contentsBox" style="float:right; border-left: medium solid #800000;　width:74.5%; height:100%; background-color:#f8dce0;"> </div> </body> </html> 上のjQuery の部分はhttp://blog.nico0927.net/20111103/jquery/316 さんの 「jQueryでdiv要素の中身にＨＴＭＬファイルを読み込みボタンで切り替え」から拝借しています。 ２）pagesフォルダの例えばtomorrow.htmlの中身は <h3 style="margin-left:10px;">明日のお天気</h3> <p style="margin:0px 10px;">平成26年3月7日10時50分 気象庁予報部発表... 明日…となる所があるでしょう。</p> です。 today.html, space.htmlも同様です。 以上です。 まことにお手数ですがよろしくご教授頂きますようお願い申し上げます。

  • Wordpressでのプログラムの競合重複について

    現在Wordpressのサイト制作で、jqueryプラグインを複数導入しようとしているのですが、 それぞれのプログラムが競合してしまい上手く動作してくれません。 記述する順番を変更したりwp_enqueue_scriptやnoConflictを試したのですが、 私の知識不足で競合の解消には至っておりません。 どこかのサイトでjqueryを読み込む際は一つでいいと確認したので、 最上部に記述しているのですがスライドショーとニュースティッカーの部分が動かない状態です。 個人的に考えられる原因としては ・それぞれのプログラムのjqueryのバージョンが違うこと ・header内のjavascriptの$が複数使われていることによる競合 だと思うのですが、 どなたか詳しい方がおられたら教えて頂けませんでしょうか？ 以下、head内の問題のソースです。 何卒よろしくお願いいたします。 <head profile="http://gmpg.org/xfn/11"> ～ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script type="text/javascript" src="http://～/wp-content/themes/～/javascript/jquery.easing.js"></script> <script type="text/javascript" src="http://～/wp-content/themes/～/javascript/jquery.kwicks.js"></script> <script type="text/javascript"> $().ready(function() { $('.kwicks').kwicks({ max : 200, duration: 1000, easing: 'easeOutQuint' }); }); </script> <script type="text/javascript" src="http://～/wp-content/themes/～/javascript/simplegallery.js"></script> <script type="text/javascript"> $(function() { var mygallery=new simpleGallery({ wrapperid: "simplegallery1", /* ギャラリーを表示する要素のID名 */ dimensions: [640, 300], /* 画像の幅、高さ（単位：ピクセル） */ imagearray: [ /* [画像URL、リンク先URL、_new] */ ["<?php bloginfo('template_directory'); ?>/images/bnr/bnr-preopen.png", ""], ["<?php bloginfo('template_directory'); ?>/images/bnr/bnr_aisatu.png","http://～.com/?page_id=74"], ], autoplay: true, /* 自動再生の有無 */ persist: true, pause: 3500, /* スライドする間隔（ミリ秒） */ fadeduration: 2000, /* フェードする移行時間（ミリ秒） */ oninit:function(){ //event that fires when gallery has initialized/ ready to run }, onslide:function(curslide, i){ //event that fires after each slide is shown //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) } }) }); </script> <script src="http://～/wp-content/themes/～/javascript/jquery.ticker.js" type="text/javascript"></script> <script src="http://～/wp-content/themes/～/javascript/site.js" type="text/javascript"></script> </head> <?php wp_head(); ?>

  • jQuery:要素の位置情報の保持について

    jQuery:要素の位置情報の保持について 現在、IE8,jQuery 1.4.1,jQuery UI　1.8.1の環境でWebアプリケーションの作成を行っています。 画像ファイルを（マウスの）ドラッグで移動させ、ドロップした後の位置情報を保持し、再びそのWebアプリケーションを起動させた時に画像ファイルが移動した後の位置のままというようにしたいと考えています。 このようなことは可能でしょうか？ もし可能な場合、何か参考となるコードやキーワードを教えていただけないでしょうか？ 画像ファイルを移動させる事までは確認しましたので載せておきます。 <html> <head> <title>ドラッグで要素移動title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="../Scripts/jquery-ui-1.8.1.custom.css" type="text/css" /> <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="../Scripts/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" language="JavaScript"><!-- $(function () { $("img.mover").draggable({ opacity: 0.5, cursor: "move", grid: [20, 20], stop: function () { var x = $(this).css("left");//この値をどこかで保持しておきたい var y = $(this).css("top");//この値をどこかで保持しておきたい alert("左：" + x + "、上：" + y ); } }); }); //--></script> </head> <body> <img src="pic1.jpg" class="mover" alt="test" /> <img src="pic2.jpg" class="mover" alt="test" /> <img src="pic3.jpg" class="mover" alt="test" /> </body> </html>

  • マウスカーソルに合わせて画像が移動するjavascriptで困っていま

    マウスカーソルに合わせて画像が移動するjavascriptで困っています。 マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、 マウスカーソルの動きについていけず、画像がワープ（？）してしまいます。 解決策が分かる方がいらっしゃいましたら、ご指摘願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE></TITLE> <SCRIPT> <!-- function move(event){ img.style.left=event.x; img.style.top=event.y; } //--> </SCRIPT> </HEAD> <BODY> <IMG src="hoge.png" name="img" style="position:absolute;" > <div onmousemove="move(event);" style="width:500px; height:500px; background-color:#cccccc;"></div> </BODY> </HTML>

  • マウスオーバすると画像の配置が変わる

    今回コチラ（http://www.skuare.net/test/jrumble.html）のjqueryを入れました。 サイト：http://snapkidz.biz/wp/ ブルブルする場所はコップの部分になります。 記載部分は以下です。 ーheader.phpー <a href="#" class="cup">cup</a> ーCSSー a.cup { display: block; width: 90px; /* 画像1枚分の横幅 */ height: 110px; /* 画像1枚分の高さ */ text-indent: -9999px; /* 文字を見えなくする */ background-image: url("http://snapkidz.biz/wp/wp-content/uploads/2011/12/cup.png"); /* 画像ファイル名 */ position:relative; top:303px; left:1080px; } a.cup:hover { background-position: top right; /* 背景画像の表示開始基準を右上に変更 */ } マウスオーバすると画像の配置が移動してしまいます。 これはどうすればなおるのでしょうか？ 宜しくお願いします。

    • ベストアンサー
    • CSS
  • スムーズに動かすにはどうしたらいいでしょうか？

    ここで教えて頂いたサイトでJavaScriptを勉強していたら、なんと私が今困っている問題そのものにぶつかり、驚きです！ http://www.openspc2.org/reibun/javascript/move/018/index.html ここで紹介してあるサンプルなんですが、動きがカクカクしています！ これをスムーズにさせたいのですが、どうすればよろしいでしょうか？ <html> <head> <title>キャラクタをキー入力に応じて上下左右に動かす</title> <script Language="JavaScript"><!-- x = 50; y = 100; function moveChar() { kc = event.keyCode; c = String.fromCharCode(kc); if (c == "A") x = x -2; if (c == "D") x = x +2; if (c == "W") y = y -2; if (c == "X") y = y +2; document.images["myChar"].style.left = x; document.images["myChar"].style.top = y; } // --></script> </head> <body onKeydown="moveChar()"> <img src="char.gif" name="myChar" style="position:absolute;left:50px;top:100px;"> </body> </html>

  • jQueryのclickについて

    現在仕事でjQueryを使用して、要素の表示非表示を行うイベントを作成しているのですが、一つ難題がありまして・・・まず下記に簡単に文法を記述しましたのでご覧下さいませ・・・ 『html』 <ul> <li>ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> </ul> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> 『jQuery』 j$("li").click(function(){ var btnNum = j$("li").index(this); j$(".area").hide(""); j$(".area").eq(btnNum).show(""); }); 上記にしたときに例えば”ボタン1”を押した時に再度”ボタン1”をおすとここでいう一番目の”area”を消去したいのですが、 toggleを使用すると”ボタン1”を押した時に”ボタン2”を押すと再び”ボタン1”を押すと、消去してからの動作をするため二度クリックしないと”area”が表示されません… そこでtoggleの様な動作で、同じボタンを二度押すと対象の要素が消去されるようないい方法ありませんでしょうか？ 折角jQueryを使用しているのでスリムな記述がしたいんですよね・・・ 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する