CSSスプライトをフェードアニメーションさせるJQueryプラグイン「hoverfade」の使い方

このページのタイトルとURLをコピーする

HTML・CSS 公開日：2013/04/22

マウスオーバー時にフェード処理をさせるJQueryプラグインは沢山あります。シンプルで実装が簡単なものからアニメーションの細かい設定が出来るものまで様々あります。

しかし、これがCSSスプライトで作ったコンテンツに対してとなると、作りが大きく変わってしまうので、imgタグに属性付けをするようなタイプのJQueryプラグインでは対応できない・・・

そこで今回はhoverfadeというJQueryプラグインを使用させていただき、CSSスプライトで作ったコンテンツにフェードアクションを付与する方法を解説していきます。IE7、8にもしっかり対応しているのでオススメです。

hoverfadeの設定・マークアップ方法

まずは、作製者さんのHPよりjsファイルをダウンロードしましょう。

http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/

JQuery本体とともにscript部分を記述していきましょう

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.hoverfade-1.0.2.js"></script>

<script type="text/javascript">
$(function(){
        $("#nav").hoverFade();
    });
</script>

6行目の#nav部分は、適応したいidやclass要素を設定できます。

html部分はこんな感じ

<ul id="nav" class="hover-anims">
    <li class="home"><a href="#">home</a></li>
    <li class="about"><a href="#">about</a></li>
    <li class="contact"><a href="#">contact</a></li>
</ul>

ulの属性にはscript部分で設定した要素”nav”を、また下記CSSでスプライト画像の呼び出しなどを設定した”hover-anims”をclassの要素として設定しています。

CSS部分はこんな感じ

ul#nav, #nav li{
    list-style:none;
    margin:0;
    padding:0;
}

#nav li {
    display:block;
    overflow:hidden;
    float:left;
    list-style-type:none;
    float:left;
    text-indent:-9999px;/*li内のアンカーテキストを不可視化*/
}

#nav.hover-css a,
#nav.hover-anims a,
#nav.hover-anims span {
    display:block;
    position:relative;
    background-image: url(./images/sprite.png); /*CSSスプライト画像呼び出し*/
    background-repeat: no-repeat;
}

#nav.hover-anims span { 
    position:absolute;
    left:0;
    top:0;
}

#nav.hover-css .home a,
#nav.hover-anims .home a,
#nav.hover-anims .home span {
    width:72px;/*呼び出すボタンの幅*/
    height:15px;/*呼び出すボタンの高さ*/
    background-position:-514px -270px;　/*マウスアウト時のスプライト画像の位置指定*/
}

#nav.hover-css .home a:hover,
#nav.hover-anims .home span {
    background-position:-432px -270px;　/*マウスオーバー時のスプライト画像の位置指定*/
}

#nav.hover-css .about a,
#nav.hover-anims .about a,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-10px -296px;
}

#nav.hover-css .about a:hover,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-335px -270px;
}

#nav.hover-css .contact a,
#nav.hover-anims .contact a,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-235px -270px;
}

#nav.hover-css .contact a:hover,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-10px -270px;
}

さらに今回はhtmlやCSSをカスタマイズをしてみました

以下の2点、製作者さんのデモとは異なったり、気になる部分がありましたので、カスタマイズして使用してみました。

・サイズが統一されたボタンメニューではなく、それぞれ異なる大きさの画像を使用する
・text-indent:-9999pxでアンカーテキスト消すという処理をやめた

デモサイトでは全て同じサイズのボタンが、隙間なく並んだナビメニューでしたが、今回実装したかったものはそれぞれ微妙に異なるサイズの画像を均一に並べるタイプのナビメニューでしたので、marginを使って高さを調節したり、隣のメニューボタンからの距離を調節しています。

さらに、上記のようにmarginを使って距離を調整したために、hoverした時に呼び出すスプライト画像がズレてしまいます。それを解決するためa:hoverにはmargin:0;を指定しています。

また、デモではリンクテキストをtext-indent:-9999pxという記述で見えなくしていますが、本来記載してあるものを視覚的になくしてしまうという行為はSEO的にどうなのだろうと思い、cssスプライトでは常套手段の1px*1pxの透明画像にalt属性をきっちり書いて配置しました。

<ul id="nav" class="hover-anims">
    <li class="home"><a href="#"><img src="./images/sp.gif" alt="ホーム" width="72" height="15" /></a></li>
    <li class="about"><a href="#"><img src="./images/sp.gif" alt="アバウト" width="87" height="15" /></a></li>
    <li class="contact"><a href="#"><img src="./images/sp.gif" alt="コンタクト" width="90" height="17" /></a></li>
</ul>

アンカーテキスト部分にはsp.gifという1px*1pxの画像を引き伸ばして使用。その画像にalt属性を付け加えました。

ul#nav, #nav li{
    list-style:none;
    margin:0;
    padding:0;
}

#nav li {
    display:block;
    overflow:hidden;
    float:left;
    list-style-type:none;
    float:left;
}

#nav.hover-css a,
#nav.hover-anims a,
#nav.hover-anims span {
    display:block;
    position:relative;
    background-image: url(./images/sprite.png); /*CSSスプライト画像呼び出し*/
    background-repeat: no-repeat;
}
#nav.hover-anims span {
    position:absolute;
    left:0;
    top:0;
}

#nav.hover-css .home a,
#nav.hover-anims .home a,
#nav.hover-anims .home span {
    width:72px;
    height:15px;
    background-position:-514px -270px;　/*マウスアウト時のスプライト画像の位置指定*/
    margin-top: 2px; /*画像によって高さが違うため調整*/
    margin-left: 81px;　/*メニューボタンの距離幅*/
}

#nav.hover-css .home a:hover,
#nav.hover-anims .home span {
    background-position:-432px -270px;　/*マウスオーバー時のスプライト画像の位置指定*/
    margin: 0; /*↑のマージンを引き継いでしまわないように*/
}

#nav.hover-css .about a,
#nav.hover-anims .about a,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-10px -296px;
    margin-left: 64px;
    margin-top: 3px;
}

#nav.hover-css .about a:hover,
#nav.hover-anims .about span {
    width:87px;
    height:15px;
    background-position:-335px -270px;
    margin: 0;
}

#nav.hover-css .contact a,
#nav.hover-anims .contact a,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-235px -270px;
    margin-left: 58px;
    margin-top: 1px;
}

#nav.hover-css .contact a:hover,
#nav.hover-anims .contact span {
    width:90px;
    height:17px;
    background-position:-10px -270px;
    margin: 0;
}

background-positionの値は今回作ったサンプルのものですので、自身が使うCSSスプライトの元画像によって変えてください。