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

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

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

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

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/07/11 08:43:19
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:psne No.3

回答回数605ベストアンサー獲得回数334

ポイント20pt

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

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

その他の回答4件)

id:Slight_Bright No.1

回答回数47ベストアンサー獲得回数2

ポイント20pt

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

id:snow0214 No.2

回答回数470ベストアンサー獲得回数116

ポイント20pt

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

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

id:psne No.3

回答回数605ベストアンサー獲得回数334ここでベストアンサー

ポイント20pt

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

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

id:pogpi No.4

回答回数428ベストアンサー獲得回数59

ポイント20pt

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

id:Yacky No.5

回答回数1376ベストアンサー獲得回数156

ポイント20pt

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

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

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

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

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

回答リクエストを送信したユーザーはいません