このサイトの閲覧者の方から、画面サイズに対応して画像が縮小する、いわゆるレスポンシブ型にできないものかとの質問を受けました。確かに最近ではスマホ対応にしないことには、一人前にあらずということですから、以前に投稿した「フェイドイン・アウト型スライドショー」を例に、レスポンシブにしてみました。
サンプル
本サンプル表示用HTML
<div id="stage"> <div id="photo1" class="pic"><img src="wp-images/1.jpg"></div> <div id="photo2" class="pic"><img src="wp-images/2.jpg"></div> <div id="photo3" class="pic"><img src="wp-images/3.jpg"></div> <div id="photo4" class="pic"><img src="wp-images/4.jpg"></div> <div id="photo5" class="pic"><img src="wp-images/5.jpg"></div> <div style="padding:28%;"></div> </div>
HTMLのポイント説明
・このスライドショーの下に何か記述とか、他の要素を加えたい場合には、画像にposition:absoluteが指定されているため、スライドショーと、下の要素が重なってしまいます。
そこで、下の要素がスライドショー画像の下に表示されるように、<div style=”padding:28%;”></div>を画像タグの下に挿入します。28%は、画像の縦/横比の1/2から決めた値です。画像サイズによって調整してください。
本サンプル表示用CSS
#stage { position: relative; max-width:600px; margin: 0 auto; background:#ddd; } .pic { position: absolute; } .pic img { width: 100%; height: auto; opacity:0; -moz-animation: imgTrans 40s infinite; -webkit-animation: imgTrans 40s ease-in infinite; animation: imgTrans 40s infinite; } #photo1 img { -moz-animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; } #photo2 img { -moz-animation-delay: 8s; -webkit-animation-delay: 8s; animation-delay: 8s; } #photo3 img { -moz-animation-delay: 16s; -webkit-animation-delay: 16s; animation-delay: 16s; } #photo4 img{ -moz-animation-delay: 24s; -webkit-animation-delay: 24s; animation-delay: 24s; } #photo5 img { -moz-animation-delay: 32s; -webkit-animation-delay: 32s; animation-delay: 32s; } @-webkit-keyframes imgTrans { 0% { opacity:0; } 7% { opacity:1; } 18% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes imgTrans { 0% { opacity:0; } 7% { opacity:1; } 18% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } } @keyframes imgTrans { 0% { opacity:0; } 7% { opacity:1; } 18% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; } }
CSSのポイント説明
・「フェイドイン・アウト型スライドショー」との違いは、以下です。
#stage のwidthの指定を、max-width: としてheightは指定していない。
img のwidth指定を100%、height指定をauto としている。
#frameは削除している。
・画像にリンクを貼りたい場合は、@keyframes の7%に、
z-index:20; を追加する。