先日、CSS3 Transitionでのアニメーション実行パターンを紹介しましたが、
今回はスクリプト系を使用せずにCSS（CSS3）のみで形成する
スライド画像ギャラリーのサンプルを紹介してみます。
CSS3で使用しているプロパティは、
TransitionやTransformは使用せず「-animation-」で動作を指定する構成になります。
初めに完成サンプルから。
※動作環境は前回同様にWebkitブラウザのSafariやChromeのみです。
CSS3 SLIDE GALLERY
右側に配置しているサムネイルをクリックすることで、
メイン部分の画像がスライドして切り替わります。
サムネイルは現在メイン部分で表示しているアクティブ状態の場合のみ
透過度が「100%」で赤枠が付きます。
中身についてはまずHTMLから。
スライドギャラリー部分のHTMLソースは以下のようになっています。
◆HTML <div id="slidewrap"> <div id="slidemask"> <div id="contents01"> <div id="thumb01"> <a href="#contents01"><img src="img/photo01.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a> </div><!--/#thumb01--> <div id="photo01"> <img src="img/photo01.jpg" width="400" height="300" alt=""> <span>【PHOTO-01】</span> </div><!--/#photo01--> </div><!--/#contents01--> <div id="contents02"> <div id="thumb02"> <a href="#contents02"><img src="img/photo02.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a> </div><!--/#thumb02--> <div id="photo02"> <img src="img/photo02.jpg" width="400" height="300" alt=""> <span>【PHOTO-02】</span> </div><!--/#photo02--> </div><!--/#contents02--> <div id="contents03"> <div id="thumb03"> <a href="#contents03"><img src="img/photo03.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a> </div><!--/#thumb03--> <div id="photo03"> <img src="img/photo03.jpg" width="400" height="300" alt=""> <span>【PHOTO-03】</span> </div><!--/#photo03--> </div><!--/#contents03--> <div id="contents04"> <div id="thumb04"> <a href="#contents04"><img src="img/photo04.jpg" width="100" height="75" alt=""><img src="img/thumb_cover.png" width="100" height="75" alt="" class="cover"></a> </div><!--/#thumb04--> <div id="photo04"> <img src="img/photo04.jpg" width="400" height="300" alt=""> <span>【PHOTO-04】</span> </div><!--/#photo04--> </div><!--/#contents04--> </div><!--/#slidemask--> </div><!--/#slidewrap-->
ちょっと長いですが、全体を囲む＜div＞の中に
「contents01」～「contents04」のid名の付いたコンテンツエリアが４つあり、
その中にそれぞれ表示する、画像・サムネイル・テキストが入っています。
そして、この４枚のコンテンツエリアを
CSSで重なり合わせてCSSアニメーション動作を組み込みます。
CSSは以下。（スライドギャラリー部分のみ）
◆CSS
/* SlideArea
-------------------------- */
#slidewrap {
margin: 0 auto;
padding: 10px;
width: 500px;
text-align: left;
background: #ddd;
}
#slidemask {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
#contents01,
#contents02,
#contents03,
#contents04 {
top: 0;
left: 0;
width: 500px;
height: 300px;
position: absolute;
}
/* ThumbnailBTN
-------------------------- */
#thumb01,
#thumb02,
#thumb03,
#thumb04 {
right: 0;
width: 100px;
height: 75px;
position: absolute;
opacity: 0.5;
z-index: 60;
}
#thumb01 {top: 0;}
#thumb02 {top: 75px;}
#thumb03 {top: 150px;}
#thumb04 {top: 225px;}
img.cover {
top: 0;
right: 0;
position: absolute;
opacity: 0;
}
#thumb01:hover,
#thumb01:hover img.cover,
#thumb02:hover,
#thumb02:hover img.cover,
#thumb03:hover,
#thumb03:hover img.cover,
#thumb04:hover,
#thumb04:hover img.cover {opacity: 1;}
/* PhotoSlideArea
-------------------------- */
#photo01,
#photo02,
#photo03,
#photo04 {
top: 0;
left: 0;
padding-right: 400px;
width: 400px;
height: 300px;
background: #ddd;
position: absolute;
}
#photo01 span,
#photo02 span,
#photo03 span,
#photo04 span {
bottom: 0;
left: 0;
padding: 0 10px;
width: 380px;
height: 30px;
line-height: 30px;
color: #fff;
font-weight: bold;
background: #333;
position: absolute;
opacity: 0.5;
}
#photo01 {z-index:40;}
#photo02 {z-index:30;}
#photo03 {z-index:20;}
#photo04 {z-index:10;}
/* CSS3 SlideAnimation
-------------------------- */
@-webkit-keyframes slideTarget {
0% {left: -400px;}
100% {left: 0;}
}
#contents01:target #photo01,
#contents02:target #photo02,
#contents03:target #photo03,
#contents04:target #photo04 {
-webkit-animation-name: slideTarget;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: 1;
z-index: 50;
}
#contents01:target #thumb01,
#contents01:target #thumb01 img.cover,
#contents02:target #thumb02,
#contents02:target #thumb02 img.cover,
#contents03:target #thumb03,
#contents03:target #thumb03 img.cover,
#contents04:target #thumb04,
#contents04:target #thumb04 img.cover {
opacity: 1;
}
コンテンツエリア４枚をを重ね合わせ、
サムネイル（#thumb01～#thumb04）をクリックした際に
「:target」プロパティを使って該当表示エリアに対して
スライドアニメーションの動作とレイヤー順序の「z-index」を最前面に持ってきています。
※CSSアニメーション動作はCSSの最下部に記述してある「slideTarget」の部分。
jQueryの様なスクリプト系を使わなくても
CSSのみでこれくらいのシンプルな画像スライドギャラリーは作ることが簡単そうです。
サンプルもそんなに複雑に凝った構成ではないので
シンプルに使えるはず。
まだ最低限の機能しか組み込んでいないので、
この先、オートスタートで自動スライドさせたり、
画像が切り替わる時にもっと凝った演出が組み込めないか試してみたくなります。
CSSのみでのスライド画像ギャラリーが必要になった際に是非。。。