ステージ下部に配置されたサムネイルをクリックすると、メイン画面に写真が右からスライド・インして表示されるタイプのフォトギャラリーであり、css の transition プロパティーを使った例である。サムネイル用の小さなサイズの写真と、表示用の写真は別々のものを用意し使う。
サンプル
針ノ木岳から爺ヶ岳への縦走路にて
本サンプル表示のHTML
<div id="stage">
<input type="radio" id="r1" name="gal">
<input type="radio" id="r2" name="gal">
<input type="radio" id="r3" name="gal">
<input type="radio" id="r4" name="gal">
<input type="radio" id="r5" name="gal">
<div id="thumbs">
<label for="r1"><img src="wp-images/s1.jpg"></label>
<label for="r2"><img src="wp-images/s2.jpg"></label>
<label for="r3"><img src="wp-images/s3.jpg"></label>
<label for="r4"><img src="wp-images/s4.jpg"></label>
<label for="r5"><img src="wp-images/s5.jpg"></label>
</div>
<div id="screen"><span id="title">針ノ木岳から爺ヶ岳への縦走路にて</span></div>
<div id="photo1"><img src="wp-images/1.jpg"></div>
<div id="photo2"><img src="wp-images/2.jpg"></div>
<div id="photo3"><img src="wp-images/3.jpg"></div>
<div id="photo4"><img src="wp-images/4.jpg"></div>
<div id="photo5"><img src="wp-images/5.jpg"></div>
<div id="cover"></div>
</div>
HTMLの概要説明
本サンプルのHTMLは、前項フェイドイン型と全く同じ。
本サンプル表示のCSS
/*ギャラリー全体のコンテナー*/
#stage {
position: relative;
width: 660px;
height: 440px;
margin: 0 auto;
overflow: hidden;
}
/*全サムネイルのコンテナー*/
#thumbs {
position: absolute;
width: 630px;
top: 360px;
left: 20px;
}
/*サムネイルのマウスオーバーでポインターを手のひらに*/
#thumbs label img {
cursor: pointer;
}
/*初期画面*/
#screen {
position: absolute;
left: 30px;
top: 10px;
width: 600px;
height: 338px;
background-color: #CCC;
}
/*初期画面上の文字*/
#screen span {
position:absolute;
top:130px;
left:50px;
font-size:32px;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
display: none;
}
/*表示写真の初期配置（全部画面右に透明配置）とtransition設定*/
#photo1, #photo2, #photo3, #photo4, #photo5 {
position: absolute;
left: 630px;
top: 10px;
opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを画面中央に移動・FadeIn*/
#r1:checked ~ #photo1, #r2:checked ~ #photo2, #r3:checked ~ #photo3, #r4:checked ~ #photo4, #r5:checked ~ #photo5 {
//position:absolute;
left:30px;
opacity:1;
}
/*どれかがチェックされたらスクリーン上の文字を非表示に*/
#r1:checked ~ #screen span, #r2:checked ~ #screen span, #r3:checked ~ #screen span, #r4:checked ~ #screen span, #r5:checked ~ #screen span {
opacity: 0;
}
/*画面右側のstage部を隠すためのカバー*/
#cover {
position:absolute;
left:630px;
width:30px;
height:348px;
background-color:#FFF;
}
CSSの概要説明
・cssも前項、フェイドイン型とほぼ同じであるが、以下の記述が異なる。
・表示写真を全部スクリーンの右側に初期配置している。
・スライド移動（transition）は、leftのpx値で設定している（opacityも同時設定）。
・ステージとスクリーンとの間の右側余白に表示以外の写真が見えないように、背景色と同じ色の矩形を配置している。
・stage以外の部分が見えないように、stageにoverflow:none;を付加している。