UNIRRY

WEBデザインとホロスコープと宇宙のブログ

ポップなオンマウス表現!マウスオーバーで飛び上がるjsをつくる

painappul

マウスオーバーの表現方法第3弾になります。マウスオンしたら、マウスオンしたものが飛び上がる感じのものをつくっています。
とりあえず普通にhtmlとcssを記載します。

html

<div id="icolist">
<ul>
<li><img src="ico1.png"></li>
<li><img src="ico2.png"></li>
<li><img src="ico3.png"></li>
<li><img src="ico4.png"></li>
<li><img src="ico5.png"></li>
</ul>
</div>

css

#icolist {
width: 655px;
height: 150px;
background: url(bg1.jpg) no-repeat left top;
}
#icolist ul {
padding: 20px 0 0 10px;
}
#icolist li {
float: left;
list-style: none;
background: url(bg.jpg) no-repeat left bottom;
cursor: pointer;
}
#icolist li img {
position: relative;
top: 0;
}

これにjQueryで動きを付け加えていきます。まずはcssで位置を変更します。

その1:jQueryでCSSをいじって浮き上がらせる

$(function () {
    $("#icolist li").hover(function(){
        $(this).children("img").css("top","-15px");
    },function(){
        $(this).children("img").css("top","0px");
    });
});

これにアニメーションをつけて、飛んだような感じにします。

その2:アニメーションを追加してふわっと移動させる

$(function () {
    $("#icolist li").hover(function(){
        $(this).children("img").animate({"top": "-15px"}, 200);
    },function(){
        $(this).children("img").animate({"top": "0px"}, 200);
    });
});

最後にイージングでそれっぽい効果をつけます。

その3:イージングを追加して着地の時に重さがあるような動きにする

ヘッダーに「jquery.easing.1.3.js」を読み込んでからソースを下記のようにします。

$(function () {
    $("#icolist li").hover(function(){
        $(this).children("img").animate({"top": "-15px"}, 200, "easeOutQuart");
    },function(){
        $(this).children("img").animate({"top": "0px"}, 400, "easeOutBounce");
    });
});

マウスオンしたものが飛び上がる感じのサンプル

サンプルはこちら

sampl_onmouse3

ついでにcss3も使って向きを変えてみたやつはこちら

CSS3も使ってみたサンプルはこちら


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3