シャッター開閉型スライドショー

tyosbb

11年前

スライドの上層でシャッターを閉じて開けるタイミングで、スライドを切り替えるタイプのスライドショーである。
シャッターは、div の枠線（border）で形成し、中の矩形部をサイズ０まで縮小することによりシャッターを閉じた状態をつくりだした。このとき、width、height を要素としてanimationを設定するとborder部は縮小・拡大しないことを応用した。なお、拡大・縮小にtransform scale() を使うと、border まで拡大縮小してしまう。

サンプル

本サンプル表示用ＨＴＭＬ


<div id="stage">
  <div id="frame">
    <div id="photos">
      <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> 
    <div id="shutter"></div>
  </div>
</div>

ＨＴＭＬに関する説明

・全スライド水平配置格納用div、#photosと、その上層用div、#shutterを配置する。
・#shutterは、画面サイズの矩形にcssで太いボーダーを設定し、矩形サイズの変形縮小拡大によってシャッタの開閉状態を作り出す。

本サンプル表示用ＣＳＳ


/* 表示画面 */
#stage {
	position: relative;
	width: 600px;
	height:338;
	margin: 0 auto;
}
/* 表示枠 */
#frame {
	width: 600px;
	height: 338px;
	position: relative;
	overflow: hidden;
}
/*全ての写真を水平一列に格納したdiv、#photosに,
スライドショーの基本の animation を設定*/
#photos {
	position:absolute;
	top:0;
        width:3000px;
	-webkit-animation: imgPassToLeft 30s infinite;
	animation: imgPassToLeft 30s infinite;
}
/*各写真の並びを水平に設定*/
.pic {
	float:left;
}
/* スライドの上層で開閉するシャッター */
#shutter {
	position:absolute;
	left:-350px;top:-350px;
	width: 600px;
	height: 340px;
	border: 350px solid #555;
	-webkit-animation:borderdeform 30s infinite;
	-webkit-animation-delay: 3s;
	animation:borderdeform 30s infinite;
	animation-delay: 3s;
}
/* スライド切替animation設定 */
@keyframes imgPassToLeft {
	0%  {   left:   0%;}
	19.99%{ left:   0%;}
	20% {   left:-100%;}
	39.99%{ left:-100%;}
	40% {   left:-200%;}
	59.99%{ left:-200%;}
	60% {   left:-300%;} 
	79.99%{ left:-300%;}
	80% {   left:-400%;}
	99.99%{ left:-400%;}
	100% {  left:   0%;}
}
@-webkit-keyframes imgPassToLeft {
	0%  {   left:   0%;}
	19.99%{ left:   0%;}
	20% {   left:-100%;}
	39.99%{ left:-100%;}
	40% {   left:-200%;}
	59.99%{ left:-200%;}
	60% {   left:-300%;} 
	79.99%{ left:-300%;}
	80% {   left:-400%;}
	99.99%{ left:-400%;}
	100% {  left:   0%;}
}
/* シャッターanimation設定 */
@keyframes borderdeform {
	0% { width:600px;height:340px;left:-350px;top:-350px;}
	8% { width:600px;height:340px;left:-350px;top:-350px;}
	10% {width:  0px;height:  0px;left: -50px;top:-180px;}
	12% {width:600px;height:340px;left:-350px;top:-350px;}
	20% {width:600px;height:340px;left:-350px;top:-350px;}
	28% {width:600px;height:340px;left:-350px;top:-350px;}
	30% {width:  0px;height:340px;left: -50px;top:-350px;}
	32% {width:600px;height:340px;left:-350px;top:-350px;}
	40% {width:600px;height:340px;left:-350px;top:-350px;}
	48% {width:600px;height:340px;left:-350px;top:-350px;}
	50% {width:600px;height:  0px;left:-350px;top:-180px;}
	52% {width:600px;height:340px;left:-350px;top:-350px;}
	60% {width:600px;height:340px;left:-350px;top:-350px;}
	68% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
	70% {width:  0px;height:  0px;left: -50px;top:-180px;border-radius:600px;}
	72% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
	80% {width:600px;height:340px;left:-350px;top:-350px;}
	88% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
	90% {width:600px;height:  0px;left:-350px;top:-180px;transform: rotate(45deg) scale(1.2,1.2);}
	92% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
	100%{width:600px;height:340px;left:-350px;top:-350px;}
}
@-webkit-keyframes borderdeform {
	0% { width:600px;height:340px;left:-350px;top:-350px;}
	8% { width:600px;height:340px;left:-350px;top:-350px;}
	10% {width:  0px;height:  0px;left: -50px;top:-180px;}
	12% {width:600px;height:340px;left:-350px;top:-350px;}
	20% {width:600px;height:340px;left:-350px;top:-350px;}
	28% {width:600px;height:340px;left:-350px;top:-350px;}
	30% {width:  0px;height:340px;left: -50px;top:-350px;}
	32% {width:600px;height:340px;left:-350px;top:-350px;}
	40% {width:600px;height:340px;left:-350px;top:-350px;}
	48% {width:600px;height:340px;left:-350px;top:-350px;}
	50% {width:600px;height:  0px;left:-350px;top:-180px;}
	52% {width:600px;height:340px;left:-350px;top:-350px;}
	60% {width:600px;height:340px;left:-350px;top:-350px;}
	68% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
	70% {width:  0px;height:  0px;left: -50px;top:-180px;border-radius:600px;}
	72% {width:600px;height:340px;left:-350px;top:-350px;border-radius:370px;}
	80% {width:600px;height:340px;left:-350px;top:-350px;}
	88% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
	90% {width:600px;height:  0px;left:-350px;top:-180px;transform: rotate(45deg) scale(1.2,1.2);}
	92% {width:600px;height:340px;left:-350px;top:-350px;transform: rotate(0deg) scale(1.2,1.2);}
	100%{width:600px;height:340px;left:-350px;top:-350px;}
}

ＣＳＳに関する説明

・スライド切り替え用animationと、シャッター開閉用animationを同時進行させ、スライド切り替えのタイミングに合わせてシャッターの開閉を行う。
・#photos内に、スライド（#photo1,,#photo5）を水平に並べ、全体（#photos）を左右に移動させることによって、スライドの切り替えを行う。
・#shutterは、枠線（border）を350pxと太く設定し、divのサイズを0にすることによって閉じた状態（全画面をボーダーで覆う状態）を作る。
・#shutterの幅、高さ、角丸、角度の組み合わせ設定によって、５つの開閉状態を作ってみた。