CSSのみでスライドショーを実現する Pure CSS Slideshow

CSS３を活用して画面全体をスライドする「Pure CSS Slideshow」をご紹介。

まだCSS３を本格的に実装できないこの状況では、スライドショーを実現しようと思ったらjQueryのライブラリなどを活用することになると思います。CSS３が汎用化するにはまだ時間がかかると思いますが、個人サイトなどでは積極的に活用していきたいところです。

Javascriptを使わない分、対応ブラウザで確認してみると非常にスムーズな動きをしてくれます。

デモページを見る

html

htmlはdivのボックスを切り替えるような形です。

<div id="a1">
 <div id="a2">
  <div id="a3">
   <!-- Top Navigation. Ya, tables are evil. -->
   <table>
    <tbody><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>
   </tbody>
  </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

cssはブラウザの幅を100%で取得できているような記述です。（出来ているんでしょうね。きっと）。あと気になったのが、styleの記述がbody内にされているところ。head内でなくてもよいのですかね。この辺の情報は未確認です。

/* 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%);
}

/*======== footer部に記述 ==================*/
/* Basic Styles */

* { margin: 0; padding: 0; }
body { overflow: hidden; color: #222; font-family: helvetica, arial; line-height: 1.2; } a:active { outline: none;}
.nextbutton, .backbutton { position: absolute; top: 0; height: 100%; width: 50%; }
.nextbutton { cursor: url('right.png'), e-resize; right: 0; }
.backbutton { cursor: url('left.png'), w-resize; left: 0; }
h1 { text-align: center; padding: 0 50px; margin-top: 150px; font-size: 50px; }
img { margin: 0 auto; display: block; margin-top: 50px;}
footer { z-index: 2; position: fixed; bottom: 60px; left: 50%; width: 600px; margin-left: -300px; text-align: center; }
footer a.link { color: #111; font-size: 15px; font-weight: bold; text-decoration: none; border-bottom: solid 2px; }
footer a.link:hover { color: red; }

/* Top Navigation.  */

table {
display: table;
width: 100%;
cellspacing: 0;
border-collapse: collapse;
position: fixed;
z-index: 5000;
top: -1px;
left: 0;
right: 0;
}

table a {
line-height: 54px;
font-family: helvetica, arial;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #aaa;
display: block;
text-align: center;
margin: 0;
background-color: #111;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

#a1:target #p1,
#a2:target #p2,
#a3:target #p3 { background-color: red; color: #fff; }

table a:hover {
background-color: #444;
-moz-transition: background 0s;
-webkit-transition: background 0s;
-o-transition: background 0s;
transition: background 0s;
}