[JS]省スペースに最適、コンテンツをローテーションで拡大表示するチュートリアル

複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。

Rotating Feature Boxes
デモページ

[ad#ad-2]

デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。
※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。

デモページ
2番をクリックして、2番が打ち出しエリアに。

[ad#ad-2]

ローテーションするフィチャーボックスの実装

HTML

3つのコンテンツはdiv要素で実装されており、それぞれidとclassを付与し、全部をdiv要素で内包します。

<div id="rotator">

	<div id="block-1" class="active">
		<h2>Subtitle #1</h2>
		<div>コンテンツ</div>
	</div>

	<div id="block-2" class="non-active-top">
		<h2>Subtitle #2</h2>
		<div>コンテンツ</div>
	</div>

	<div id="block-3" class="non-active-bottom">
		<h2>Subtitle #3</h2>
		<div>コンテンツ</div>
</div>

</div>

CSS

ラッパーとなるdiv要素にスタイルを適用します。

#rotator { width: 920px; height: 280px; position: relative; background: white; padding: 20px; }

各コンテンツは分かりやすいように、背景に異なるカラーを指定します。

#block-1 { background: #d5fcff; }
#block-2 { background: #e1ffd5; }
#block-3 { background: #ffffd8; }

各コンテンツに「overflow: hidden;」を適用し、アニメーションを各ブラウザごとに同じスピードで指定します。

#rotator > div { 
	position: absolute; 
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

各コンテンツの状態によるサイズやポジションを設定します。

#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .non-active-top { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-bottom { top: 170px; left: 620px; height: 130px; width: 320px; }		
#rotator .non-active-top:hover, #rotator .non-active-bottom:hover { 
	cursor: pointer;
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); 
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); 
	box-shadow: 0 0 10px rgba(0,0,0,0.4); 
}

各h2要素はボックスの高さと同じのline-heightを指定することで、真ん中に配置しています。

#rotator h2 {
	text-align: center; 
	line-height: 130px;
}
#rotator .active h2 {
	display: none;
}

#rotator > div > div { 
	padding: 20px; 
}
#rotator > div > div img {
	float: right;
	margin: 0 20px 2px 10px;
}

JavaScript

「jquery.js」を外部ファイルで記述し、以下のスクリプトを記述します。

$(function() {
	var current;
			
	function rotate() {
// This seems like a sucky way to do it, but you can't select by classes because they execute in order
					
		if (current == 1) {
			$("#block-1").removeClass().addClass("active");
			$("#block-2").removeClass().addClass("non-active-top");
			$("#block-3").removeClass().addClass("non-active-bottom");
		} else if (current == 2) {
			$("#block-1").removeClass().addClass("non-active-bottom");
			$("#block-2").removeClass().addClass("active");
			$("#block-3").removeClass().addClass("non-active-top");
		} else {
			$("#block-1").removeClass().addClass("non-active-top");
			$("#block-2").removeClass().addClass("non-active-bottom");
			$("#block-3").removeClass().addClass("active");
		}
	
	}
	
	$("#rotator div").click(function() {
	
		// Enables reversing, idea via Andrea Canton: https://twitter.com/andreacanton/status/24954634279849985
		current = this.id.substr(6);			
		rotate();
	
	});

});