[CSS]スタイルシートだけで実装されたスライドショー -Pure CSS Slideshow

CSS3を使って実装された、スライドのアニメーションや各パネルのダイレクトリンク機能を備えたスライドショーを紹介します。

Pure CSS Slideshow

[ad#ad-2]

スタイルシートだけで実装されたスライドショーはアニメーションでスライドするので、CSS3 transitionに対応したChrome, Safariでお楽しみください。
Firefox 4などの非対応ブラウザでは、アニメーション無しでスライドされます。

また、各パネルへのリンクは#リンクに対応しており、個別のパネルにリンクすることも可能です。

• 1ページ目を表示

2ページ目を表示したキャプチャ

3ページ目を表示したキャプチャ

[ad#ad-2]

IE7などの非対応ブラウザの表示は、こんなんなります。

IE7でのキャプチャ

HTML

スライドする各パネルはdiv要素で実装されています。

<div id="a1">
	<div id="a2">
		<div id="a3">

<!-- Top Navigation. Ya, tables are evil. -->
		<table>
			<tr>
				<td><a href="#a1" id="p1">1</a></td>
				<td><a href="#a2" id="p2">2</a></td>
				<td><a href="#a3" id="p3">3</a></td>
			</tr>
		</table>

<!-- Fallback -->
		<div id="i0" class="page">
			<h1>Your browser sucks.</h1>
		</div>

<!-- First Page #a1 -->
		<div id="i1" class="page">
			<a href="#a3" class="backbutton"></a>
			<a href="#a2" class="nextbutton"></a>
			<h1>Pure CSS Slideshow</h1>
			<img src="pure-css-slideshow-1.png">
		</div>

<!-- Second Page #a2 -->
		<div id="i2" class="page">
			<a href="#a1" class="backbutton"></a>
			<a href="#a3" class="nextbutton"></a>
			<h1>Simplified Demo</h1>
			<img src="pure-css-slideshow-2.png">
		</div>

<!-- Third Page #a3 -->
		<div id="i3" class="page">
			<a href="#a2" class="backbutton"></a>
			<a href="#a1" class="nextbutton"></a>
			<h1>Check the Source Code</h1>
			<img src="pure-css-slideshow-3.png">
		</div>

		</div>
	</div>
</div>

CSS

スライドショーのコアとなるスタイルシートは、下記のようになります。

/* The Basic Style for all Pages */
.page {
position: absolute;
width: 100%;
height: 100%;
}

/* The Pages */
#i1 { left: 0%; background-color: #fff; }
#i1 { left: 100%; background-color: #fff; }
#i2 { left: 200%; background-color: #bbb; }
#i3 { left: 300%; background-color: #777; }

/* The Transition Effect */
.page {
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
-o-transition: -o-transform 0.8s;
}

/* The Sliding Action */
/* TranslateX for better Performance. Translate3D for better Performance on Ipad. */

#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(0%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -o-transform: translateX(-200%); }#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -o-transform: translateX(-300%); }

/* The First Page - Initial Positioning without Anchor */
.page { 
-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%);

via: Create A Slideshow With Pure CSS (Easily)