Mach3.laBlog

JS/CSSでふわりとフェードするボタンをつくる

この記事は賞味期限切れです。(更新から1年が経過しています)

震災後、なんやかんやで2週間あけてしまいました。こんにちは、私は元気です。
今日は、せっかくCSS3で色々な事が出来るようになってきたところで、
ふわりとフェードするボタンの作りなどを記してみる。

JS/CSSでふわりとフェードするボタンをつくる

作るもの

  • マウスオーバーすると、ふわーっと表示が切り替わるボタン。
  • 画像を二枚重ね、上の画像の透明度を変化させて表示を切り替える。

マウスオーバーすると、ふわーっと表示が切り替わるボタン

こういったUIにあたるエフェクトは好みが別れる気がしますが、
個人的にはリッチな感じがして結構好きです。

HTML

<div id="demo" class="fadeButton">
    <a href="#">FadeButton</a>
</div>

基本となるCSS

#demo {
    display: block;
    width: 135px;
    height: 135px;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(default.png);
}

#demo a {
    display: block;
    width: 135px;
    height: 135px;
    text-indent: -9999px;
    overflow: hidden;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url(hover.png);
}

まずはCSS3のTransitionsで

Transitionsを使うと恐ろしく簡単なコードで実現できちゃいます。

.fadeButton a {
    opacity: 0;
    -webkit-transition: opacity .5s linear;
}

.fadeButton a:hover {
    opacity: 1;
    -webkit-transition: opacity .5s linear;
}

ね、簡単でしょう?(ボブ

が、現在はまだサポートしているブラウザは少ないので、
サポート外のブラウザについてはJavaScriptに頼らざるを得ません。

Transition非対応の環境の為のJavaScriptを用意する

Transition非対応のブラウザ用に、JavaScriptによるフォールバックを用意します。
判別には先日紹介した「head.js」を使用。

CSSの:hoverスタイルを上書き

非対応の場合の:hoverスタイルを無効にしておきます。
Transitions非対応な場合は、head.jsが
“no-csstransitions”をhtml要素のclassに追加してくれるので
こんな感じで。

.no-csstransitions .fadeButton a:hover{
    opacity:0;
}

JavaScriptでフェードイン/アウトさせる

jQueryを使った次のようなコードで、
大体似たようなエフェクトを付加させられます。

(function ($) {
    if (!head.transitions) { // head.jsでTransitions対応を判別
        $(".fadeButton").each(function () {
            var self = $(this);
            self.bind({
                mouseover: function (e) {
                    self.children("a").stop().animate({
                        opacity: 1
                    }, 500);
                },
                mouseout: function (e) {
                    self.children("a").stop().animate({
                        opacity: 0
                    }, 500);
                }
            });
        });
    }
})(jQuery);

デモ&ファイナルコード

JS/CSSでふわりとフェードするボタンをつくる – jsdo.it – Share JavaScript, HTML5 and CSS

注意!

IEで透過PNGを使ってフェードしようとすると不具合が生じるので注意。
DD_belatedPNG等を使って回避する必要があります。
» IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

mach32ac00a19d261ed2dfb9c3434899a1ce9
<p>上記のデモページでは無事動作しましたでしょうか?</p>

<p>デモページがきちんと動作している場合、
必要なライブラリが読み込まれていない可能性や、
( head.jsやjQuery.jsは事前に読み込まれているかどうか )
クラス名の不備等の可能性が考えられます。
( fadeButtonクラスのタイプミス等 )</p>

<p>少々要領を得ない回答になっているかもしれませんが、
参考になれば幸いです。</p>
nana50e7a3ec6fd22a3f2958e017e01f06fe
<p>すみません、まったくの初心者です。このふわりとフェードするボタンを作りたくて、参考にさせて頂いているのですが、ブラウザチェックをすると、どうしてもFirefoxでうまく表示されません。Safariではきれいに、フワッとしました。。。質問するときに、どのようなことを書いたらよいのかもわからないので、大変申し訳ないのですが。。。よかったらご指導頂けないでしょうか。ごめんなさい。</p>