実例から学ぶ、CSS3とjQueryを併用する際の切り分け方法

CSS3でもjQueryでも実装できるシャッターのようにスライドするエフェクトを例に、CSS3とjQueryを併用し切り分けて実装する方法を紹介します。

Garage Door Style Menu
デモページ

[ad#ad-2]

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

• マークアップとスタイリング
• jQuery Method
• CSS3 Method
• CSS3とjQueryの併用 -Modernizr

マークアップとスタイリング

HTML

HTMLはクリーンでセマンティックに実装されています。

<ul id="garagedoor">
	<li id="shutter1"><a href="#1">Link 1</a></li>
	<li id="shutter2"><a href="#2">Link 2</a></li>
	<li id="shutter3"><a href="#3">Link 3</a></li>
	<li id="shutter4"><a href="#4">Link 4</a></li>
</ul>

各アイテムにはidを与え、これをエフェクトのフックとして利用します。
「nth-child()」を使用するのも手ですが、ブラウザの互換性のためここでは使用しません。

CSS：装飾用

装飾用のスタイルシートです。

#garagedoor {
	margin: 50px auto;
	list-style: none;
	background: url(../images/menu-bg.jpg);
	width: 800px;
	overflow: auto;
}

#garagedoor li {
	width: 200px;
	height: 100px;
	display: block;
	float: left;
}

#garagedoor li#shutter1 {
	background: url(../images/shutter-africanplains.jpg) no-repeat;
}
#garagedoor li#shutter2 {
	background: url(../images/shutter-reptiles.jpg) no-repeat;
}
#garagedoor li#shutter3 {
	background: url(../images/shutter-aviary.jpg) no-repeat;
}
#garagedoor li#shutter4 {
	background: url(../images/shutter-arcticzone.jpg) no-repeat;
}

#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(../images/window.png) no-repeat bottom center;
   text-indent: -9999px;
}

背景はul要素に適用し、個々のアイテムにはli要素に幅と高さをセットしています。各アイテムにはidを利用して、個別の背景画像を指定します。
a要素はブロック要素に変更し、オーバーレイとなる画像を指定します。

jQuery Method

シャッターのエフェクトをjQueryで、実装します。

JavaScript

jquery.jsを外部ファイルとして、下記のスクリプトをプラグインとして記述します。

$(function() {

	// Set CSS for old versions of Firefox (Required to use the backgroundPosition js)
	$('#shutter1').css({backgroundPosition: '0px 0px'});
	$('#shutter2').css({backgroundPosition: '0px 0px'});
	$('#shutter3').css({backgroundPosition: '0px 0px'});
	$('#shutter4').css({backgroundPosition: '0px 0px'});

	// Animate the Shutter
	$("#garagedoor a").hover(function(){
	      $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
	    }, function() {
	      $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
	});

 });

各アイテム（#garagedoor a）のホバー時にイベントを設定します。ホバーイベントが発生すると、jQueryが親エレメントを探して、そのエレメントに背景ポジションのアニメーションを実行します。

CSS3 Method

jQueryを使用しないで、CSS3で同様のエフェクトを実装することが可能です。
※CSS3アニメーションに対応したWebkit系ブラウザ（Chrome, Safari）で動作します。Firefoxは4beta2でサポートされています。

CSS

シャッターのエフェクトをCSS3で実装します。
上記で使用したスクリプト部分は削除して、下記のスタイルシートを記述します。

#garagedoor li {
	width: 200px;
	height: 100px;
	display: block;
	float: left;
	-webkit-transition: background-position 0.6s ease;
	-moz-transition: background-position 0.6s ease;
}

#garagedoor li:hover {
	background-position: 0 -100px !important;
}

li要素のホバーイベントに背景ポジションを指定し、li要素にアニメーションの指定をします。

[ad#ad-2]

CSS3とjQueryの併用 -Modernizr

このようなテクニックにCSS3とjQueryをどのように使うのが良いかというのは、CSS3に対応しているブラウザにはCSS3でエフェクトを適用し、そうでないものにはjQueryで適用することではないでしょうか。
その際、ブラウザが何をサポートしているか判定するJavaScriptのライブラリ「Modernizr」が役立ちます。

Modernizr

ModernizrはCSS3やHTML5の各機能がそのブラウザで利用できるかチェックし、CSSの場合は自動でエレメントにclassを加えます。

Modernizr: CSS

Modernizrの「csstransitions」はclassをHTML要素に適用することができます。

/* Modernizer Enabled */
.csstransitions #garagedoor li {
	-webkit-transition: background-position 0.6s ease;
	-moz-transition: background-position 0.6s ease;
	-o-transition-property: background-position 0.6s ease;
}
.csstransitions #garagedoor li:hover {
	background-position: 0 -100px !important;
}

これはtransitionをサポートしないブラウザには適用しないようにします。
そして、transitionをサポートしていないブラウザには、次のスクリプトを使用して、jQueryベースのエフェクトを適用します。

Modernizr: JavaScript

if (!Modernizr.csstransitions) {
   // do fallback stuff
}

これだけではまだjQueryは使用できないので、jQueryをダイナミックに読み込み、エフェクトを実行できるようにします。

Modernizr: JavaScript

var jQueryScriptOutputted = false;

function initJQuery() {

    if (typeof(jQuery) == 'undefined') {

        if (!jQueryScriptOutputted) {
            jQueryScriptOutputted = true;

            // Primitive way of loading scripts (no library yet)
            document.write("<scr" + "ipt src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></scr" + "ipt>");
        }
        setTimeout("initJQuery()", 50);

    } else {

    	// jQuery way of loading scripts
    	$.getScript('js/jquery.backgroundPosition.js', function() {

            // Set CSS in Firefox (Required to use the backgroundPosition js)
			$('#shutter1').css({backgroundPosition: '0px 0px'});
			$('#shutter2').css({backgroundPosition: '0px 0px'});
			$('#shutter3').css({backgroundPosition: '0px 0px'});
			$('#shutter4').css({backgroundPosition: '0px 0px'});

			// Animate the Shutter
			$("#garagedoor a").hover(function() {
			      $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
			    }, function() {
			      $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
			});

    	});

    }

}

if (!Modernizr.csstransitions) {
	initJQuery();
}