全画面（フルスクリーン）スライドショー

投稿日: 作成者:

　フルスクリーンのスライドショーの作成である。画面全体を写真で覆い尽くす設定として、background-size:cover; を用いた。ユーザーの表示画面の縦横比が如何様になっても、空白ができたり、タイル状になったりしないので、本稿の目的とするスライドショーには最適と思われる。
　また、スライド毎に、メモ書きというか説明文を挿入することにし、これの登場にもanimationを付与した。　さらに、”play”,”pause” ボタンを設置し、スライドショーの進行（animation）を一時停止したり、再スタートさせたりできるようにした。
　スライド写真、メモ書きなどをレスポンシブ表示に対応させ、スライド写真を、画面幅が640px以下になった時に、別写真を表示させるようにした。
　なお、準備した写真のサイズは、1920*1080 px と、小型デバイス用に、640*1080 px である。
　SAMPLEは、フェイドイン・アウト型、スライドイン・アウト型の二通り示す。

　SAMPLEを、以下の別ページに示す。
　(1) FadeIn Out 型
　http://css.programming.jp/pages/fullscreen_slideshow/
　(2) SlideIn Out 型
　http://css.programming.jp/pages/fullscreen_slideshow/slide.html

本サンプル表示用HTML（FadeIn Out 型）

  
  <input type="radio" id="play_btn" class="r_btn" name="btn" />
  <input type="radio" id="pause_btn" class="r_btn" name="btn" />
  <div id="pcontainer">
      <div id="photo1" class="frame"><span class="memo"><strong>針ノ木岳の朝焼け　新越山荘から撮影</strong><br /><br />
      　朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。やがて、彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。
</span></div>
      <div id="photo2" class="frame"><span class="memo"><strong>針ノ木岳を背に　岩小屋沢岳への登り</strong><br /><br />
      　岩小屋沢岳のピークまでは、一旦下って登り返すわけであるが、ここでの登りの辛さはほとんど覚えていない。それほど周りの景色を堪能したということだろう。</span></div>
      <div id="photo3" class="frame"><span class="memo"><strong>雲海のかなたに剣岳の雄姿</strong><br /><br />
      　６時５分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。これだけ近くからの迫力ある剣・立山はここからしか見られない。</span></div>
      <div id="photo4" class="frame"><span class="memo"><strong>樹林越しに鹿島槍ヶ岳方面を望む</strong><br /><br />
      　岩小屋沢岳からの道のりでも楽しい眺望が続き、だんだん低木越しになる山並みを楽しみながら進んだ。しかし、眺望が効かなくなった種池山荘への最後の登りは結構しんどい思いをした。種池山荘着が午前９時。</span></div>
      <div id="photo5" class="frame"><span class="memo"><strong>爺岳登山路から岩小屋沢岳方面を望む</strong><br /><br />
      　種池山荘からピストンする人と、冷池山荘に行き交う人で小石の散らばった歩きやすい登山路も賑わってた。急ぐ旅ではない。ゆっくり、ゆっくりと登る。いい天気、素晴らしい眺望。槍が岳、穂高岳や後立山連峰も全容を現している</span></div> 
  </div>
  <label for="pause_btn" id="pause"><img src="images/pauses.png" alt="pause" /></label>
  <label for="play_btn" id="play"><img src="images/plays.png" alt="play" /></label>

本サンプル表示用CSS（FadeIn Out 型）

html, body { height:100%; }
/* すべての写真を格納するdiv定義 */
#pcontainer { position:relative;width:100%; height:100%; }
/* 各スライドdivの背景画像設定 */
#photo1 { background-image: url(images/1.jpg); }
#photo2 { background-image: url(images/2.jpg); }
#photo3 { background-image: url(images/3.jpg); }
#photo4 { background-image: url(images/4.jpg); }
#photo5 { background-image: url(images/5.jpg); }
/* 表示画面サイズ幅が640px以下で画像切り替え */
@media screen and (max-width: 640px) {
	#photo1 { background-image: url(images/s1.jpg); }
	#photo2 { background-image: url(images/s2.jpg); }
	#photo3 { background-image: url(images/s3.jpg); }
	#photo4 { background-image: url(images/s4.jpg); }
	#photo5 { background-image: url(images/s5.jpg); }
}
/* 全スライド共通のstyleとanimationの設定 */
.frame { 
	width:100%; height:100%; position:absolute;top:0;left:0;
	background-size:cover;
	opacity:0;
	animation:imgTrans 30s infinite;
	-webkit-animation:imgTrans 30s infinite;
}
/* 各スライドのanimationに時間的ずれを設定 */
#photo2 { animation-delay: 6s;-webkit-animation-delay: 6s; }
#photo3 { animation-delay:12s;-webkit-animation-delay:12s; }
#photo4 { animation-delay:18s;-webkit-animation-delay:18s; }
#photo5 { animation-delay:24s;-webkit-animation-delay:24s; }
/* メモ表示の共通したstyleとanimationの設定 */
.memo {
	display:inline-block;
	max-width:300px;width:85%;
	background-color: rgba( 255, 255, 255, 0.6 );
	padding:10px;
	position:absolute;
	bottom:10%;
	left:5%;
	font-size:14px;
	opacity:0;
	animation:txtTrans 30s infinite;
	-webkit-animation:txtTrans 30s infinite;
}
/* 各メモのanimationに時間的ずれを設定 */
#photo2 .memo { animation-delay: 6s;-webkit-animation-delay: 6s; }
#photo3 .memo { animation-delay:12s;-webkit-animation-delay:12s; }
#photo4 .memo { animation-delay:18s;-webkit-animation-delay:18s; }
#photo5 .memo { animation-delay:24s;-webkit-animation-delay:24s; }
/* 一時停止ボタンとプレイボタンの表示とanimation制御の定義 */
#pause_btn:checked ~ #pcontainer .frame { animation-play-state:paused;-webkit-animation-play-state:paused; }
#pause_btn:checked ~ #pcontainer .frame span { animation-play-state:paused;-webkit-animation-play-state:paused; }
#pause_btn:checked ~ #pause img { display:none; }
#pause_btn:checked ~ #play img { display:block; }
#play_btn:checked ~ #pcontainer .frame { animation-play-state:running;-webkit-animation-play-state:running; }
#play_btn:checked ~ #pcontainer .frame span { animation-play-state:running;-webkit-animation-play-state:running; }
/* 一時停止ボタンとプレイボタンのstyleの定義 */
.r_btn { display:none; }
#play img { display:none; }
label { position:absolute;left:50%;bottom:5%;margin-left:-30px; }
label img {	max-width:60px; width:70%;} 
label img:hover { cursor:pointer; }
/* スライドのFadeIn,FadeOutのanimation設定 */
@keyframes imgTrans {
 0%   { opacity:0; }
 5%   { opacity:1; }
 18%  { opacity:1; }
 22%  { opacity:0; } 
 100% { opacity:0; }
}
@-webkit-keyframes imgTrans {
 0%   { opacity:0; }
 5%   { opacity:1; }
 18%  { opacity:1; }
 22%  { opacity:0; } 
 100% { opacity:0; }
}
/* メモ表示のanimation設定 */
@keyframes txtTrans {
 0% {   opacity:0; bottom: 5%; }
 5% {   opacity:1; bottom:15%; }
 18% {  opacity:1; bottom:15%; }
 22% {  opacity:1; bottom:15%; } 
 100% { opacity:0; bottom: 5%; }
}
@-webkit-keyframes txtTrans {
 0% {   opacity:0; bottom: 5%; }
 5% {   opacity:1; bottom:15%; }
 18% {  opacity:1; bottom:15%; }
 22% {  opacity:1; bottom:15%; } 
 100% { opacity:0; bottom: 5%; }
}

なお、SlideIn Out 型に関しては、htmlはFadeIn Out 型と同じ。
cssに関しては、変更点は以下の通り。
●#pcontainer { position:relative;width:100%; height:100%; }　を、
　#pcontainer { position:relative;width:100%; height:100%;overflow:hidden; } に、
●.frame 内の、
　width:100%; height:100%; position:absolute;top:0;left:0; を、
　　width:100%; height:100%; position:absolute;top:0;left:100%; に、
　opacity:0; を削除、
●animation の
@keyframes imgTrans {
0% { opacity:0; }
5% { opacity:1; }
18% { opacity:1; }
22% { opacity:0; }
100% { opacity:0; }
} を、
@keyframes imgTrans {
0% { left:100%; }
5% { left:0%; }
20% { left:0%; }
25% { left:-100%; }
100% { left:-100%; }
}　に、

それぞれ変更する。
最後のanimation 部は、-webkit-部も同様に変更する。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です