キャラクターがぴょこんと飛び出すメニューの作り方

質問

http://www.chikinramen.jp/chikirars/character01.html

上記のサイトの様に、マウスオーバーでキャラクターがぴょこんと飛び出してくるメニューを作りたいのですが、そういったJavaScriptが掲載されているサイトはありますでしょうか。
それに近い
FreshBottomSlideOutMenuというのは見つけたのですが、メニュー自体が上に飛び出すのではなくて、メニューからイラストが飛び出すのを探しています。

知っている方いらっしゃれば教えて下さい。

よろしくお願いします。

回答No.1

yambejp · ベストアンサー

一番簡単なのは、オンマウスでアニメgifに入れ替える

<img src="1.gif" onmouseover="x=this.src;this.src='1anime.gif'" onmouseout="this.src=x">

お礼

なるほど！！
アニメギフに入れ替えるなんて思いつきもしませんでした。
発想の転換ですね！

回答していただきありがとうございました。

回答No.2

siro karasu（@whiteRaven）

飛び出す画像がそれぞれ違うとなると使えないですが…
それっぽい事が出来ると思います。

easing プラグインを使用すると、飛び出た感を出しやすいと思います。
#menuBg の背景を画像にすれば良い感じかと。

アニメーションの時間の微調節や、位置など、非常に適当にやってます。

こんな感じでどうでしょう。

--header ------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#mainMenu ul li').hover(function(){
var posiY = $(this).index('li');
var posi = ((posiY+1)*100)-70; //ここで、左右位置を微調節
$('#menuBg').text(posi)
$('#menuBg').css({
left:posi,
});
$('#menuBg').animate({
top:'50px' //ここで、縦位置調整 飛び出したときの位置
},'fast','easeOutBounce')
},function(){
$('#menuBg').animate({
top:'100px' //ここで、縦位置調整 引っ込んだときの位置（メニューバーで隠れるように）
},'fast','easeOutBounce')
});
});
</script>

<style>

*{margin:0px; padding:0px;}
img{border:none;}
ul,li{list-style:none;}

#menuBg{
position:absolute;
background:#09F;
width:30px;
height:30px;
top:100px;
}
#mainMenu{
}
#mainMenu ul:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
#mainMenu ul li a{
display:block;
padding:30px auto;
background:#aaa;
height:30px;
}
#mainMenu ul li{
position:relative;
float:left;
width:100px;
top:100px;
z-index:100;　/* 横メニューで、飛び出す前の画像を隠すために z-indexを調整 */
}

</style>

--header ------
--body---------

<div id="mainMenu">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
</ul>
<div id="menuBg"></div>
</div>

--body---------

お礼

お礼が遅くなってしまい大変申し訳ございませんでした。

しかも、Java Scriptを記載いただけるなんて、本当に感謝しております。

色々、微調整等行ない、試してみたいと思います。

回答していただいてありがとうございました。