画像にマウスオーバーすると、png画像が吹き出すようなアニメーションをやりたいのですが、

以下サイトは どうやって実装しているのでしょうか?

http://www.nagashima-resortkohosuishin.jp/

こちらのサイトの中腹の丸いボタンが4つ並んでいるやつです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/07/10 16:05:24
  • 終了:2014/07/11 08:43:19

ベストアンサー

id:psne No.3

ぽけっとしすてむ回答回数441ベストアンサー獲得回数2362014/07/10 17:56:29

ポイント20pt

ちょっと書きますね。
http://jsfiddle.net/nS376/

jQuery 2.1.0
jQuery Easing v1.3
を使ってアニメーションさせています。

その他の回答(4件)

id:Slight_Bright No.1

Slight_Bright回答回数47ベストアンサー獲得回数22014/07/10 17:03:37

ポイント20pt

jQueryによる実装でしょう。この例では、common.jsというリンクファイルに具体的なプログラムが記載されています。

id:snow0214 No.2

snow0214回答回数470ベストアンサー獲得回数1162014/07/10 17:40:32

ポイント20pt

そのサイトで使っているものとは少し違うのですが、jQueryとtooltipsterプラグインを使うと簡単に実現できます。

詳しい手順は下の記事を読んで下さい。
http://javatechnology.net/jquery/tooltipster/

id:psne No.3

ぽけっとしすてむ回答回数441ベストアンサー獲得回数2362014/07/10 17:56:29ここでベストアンサー

ポイント20pt

ちょっと書きますね。
http://jsfiddle.net/nS376/

jQuery 2.1.0
jQuery Easing v1.3
を使ってアニメーションさせています。

id:pogpi No.4

pogpi回答回数356ベストアンサー獲得回数462014/07/10 18:23:47

ポイント20pt

onmouseoverで、関数を呼んで、style.visibilityがhiddenだったのをvisibleにすれば、できそうですね。
onmouseooutで、逆にhiddenにすればいいですね。
動きも、style.topをsetTimeoutで変えればできますね。
微妙な動きなのでどうすでばできるか、ちょっと考えないと難しいですが、Math.sinとかを使っていると思います。

id:Yacky No.5

エネゴリ回答回数1371ベストアンサー獲得回数1542014/07/10 18:40:15

ポイント20pt

吹き出しの画像がgifですがこちらが参考になると思います。
http://www2s.biglobe.ne.jp/~nkazu/hpmethod/item10.html#

  • id:psne
    jQueryと自前のJavaScriptで表示しているようです。
    具体的には、common.jsというファイルの「グローバルメニュー吹き出しアニメーション」という部分がそれにあたります。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません