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

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

この記事のタイトルとURLをコピーする
CSSスプライトをフェードアニメーションさせるJQueryプラグイン「hoverfade」の使い方
https://webkikaku.co.jp/blog/htmlcss/hoverfade/
facebook twitter hatena Pocket

マウスオーバー時にフェード処理をさせる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スプライトの元画像によって変えてください。

他のCSSスプライトへのフェード処理方法について

下記URLで紹介されている、sprite.jsとeasing.jsを組み合わせて使う方法も実装までは至ったのですが、こちらのプラグインではIE8以下には上手く対応してくれませんでした。(マウスオーバー時の画像が最初から出てしまう)

http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/

また他にも、spritemenu.jsといったプラグインなどもありましたが、サイズの統一されたメニューボタンでしか上手く実装出来なさそうな感じがしましたので見送りました。

この記事のタイトルとURLをコピーする
CSSスプライトをフェードアニメーションさせるJQueryプラグイン「hoverfade」の使い方
https://webkikaku.co.jp/blog/htmlcss/hoverfade/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ