[CSS]画像のロールオーバーにフェード効果を与える方法の理想と現実

CSSスプライトを使用した画像のロールオーバーにアニメーションでフェード効果を与える際の、妥当な実装方法、理想の実装方法、現実の実装方法を紹介します。

Fade Image Into Another (within a Sprite)
デモページ

[ad#ad-2]

下記は各ポイントを意訳したものです。

• 最初の方法：妥当
• 二番目の方法：理想
• 三番目の方法：現実

デモでは、上から順番に実装されています。

最初の方法：妥当

HTML

元のエレメント内にspanを一つ配置します。確かにこれは余分のマークアップと感じるかもしれませんが、spanを使用せずに疑似要素を使用すると対応ブラウザが限られてしまうのが現状です。

<a href="#" class="arrow">Arrow<span></span></a>

CSS

矢印画像はテキストを画像に置換して配置します。

.arrow {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 36px;
        height: 36px;
        background: url(sprites.png) no-repeat;
}

CSS

spanにはpositionにabsoluteを指定します。また、CSS3を使用して不透明度を設定します。

.arrow span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
}

CSS

ホバー時に不透明度が1になるように指定します。

.arrow:hover span {
        opacity: 1;
}

[ad#ad-2]

二番目の方法：理想

HTML

上で紹介したspanを使用しているのは、疑似要素のアニメーションにFirefox4だけしか対応していないためです。将来的にはWebkit系ブラウザ（Chrome, Safari）も同様にサポートすると思われます。
そうなれば、下記のようなクリーンなマークアップが可能になります。

<a href="#" class="arrow">Arrow</a>

CSS

スタイルシートは「.arrow:after」に変更するだけで、あとは全く同じです。

.arrow:after {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
}
.arrow:hover:after {
        opacity: 1;
}

三番目の方法：現実

いくつかのブラウザでは、疑似要素やCSSアニメーションをサポートしていません。IEをはじめとするより多くのブラウザに対応させるには、「jQuery」に頼らなければならないでしょう。

HTML

HTMLは、またspanを使用することになります。

<a href="#" class="arrow">Arrow<span></span></a>

CSS

スタイルシートは基本的には同じです。
フェードの処理はjQueryに託すので、そこが省かれています。

.arrow {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 36px;
        height: 36px;
        background: url(sprites.png) no-repeat;
}
.arrow span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
}

JavaScript

「jquery.js」を外部ファイルとし、フェードをスクリプトで記述します。

$(function() {
        $(".arrow3")
        .find("span")
        .hide()
        .end()
        .hover(function() {
                $(this).find("span").stop().fadeIn();
        }, function() {
                $(this).find("span").stop().fadeOut();
        });
});