ステージ下部に配置されたサムネイルをクリックすると、メイン画面に写真が右からスライド・インして表示されるタイプのフォトギャラリーであり、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;を付加している。
はじめまして。htmlを勉強し始めて初心者でして、参考にさせていただいています。
サンプルでは、サムネイルをクリックするとステージの右上から画像が拡大されて現れるようになっていますが、例で示されている通りにCSSを書くと、画像が右からスライドインして登場します。このページそのもののソースを見てみてもよく分かりません。サンプル通りに右上から画像が拡大されて登場するようにするには、どうすれば良いでしょうか。
nicolausさんはじめまして。
さて、この項のサンプルが右上から拡大するようになっていますね。本来、右からスライドインするように作成したものです。何故か表示が今のようなサンプルになっているのが分からないのですが（おそらくWordpressかテーマのバグだと思うのですが）、サンプルのように、右上から拡大してくるようにするには、以下の様にCSSの記述を追加してください。
#photo1, #photo2, #photo3, #photo4, #photo5 { の中に、
transform: scale(0,0);transform-origin: top right; を、
#r1:checked ~ #photo1,,,, { の中に、
transform: scale(1,1);transform-origin: top right;
を、追加して見て下さい。希望のような動きになると思います。
大変素早いご回答をありがとうございます！ なるほど、Wordpressのバグというものもあるのですね。早速、教えていただいた通りにCSSを書き換えてみたところ、サンプルのように右上から拡大して写真を登場させられるようになりました。ありがとうございました！ 今後もこのサイトで色々と勉強させていただきます。何卒よろしくお願いいたします。
お役に立てて良かったです。
今後も当サイトをご活用ください。