スライス(分割画像)連続登場型スライドショー

 スライドを縦方向に分割した(ここでは8分割)画像の各々が、拡大移動しながら連続して登場し、最終的にはステージに本来の画像を表示するというタイプのスライドショーである。
 画像を分割するには、fireworksなどの定番ソフトがあるが、photoscapeのような無料ソフトの使用が便利である。

用意する画像

 600*338pxのスライド(ここでは5枚)の各々を縦に分割(ここでは8分割)し、各スライドにつき短冊状のスライス画像(幅75PX、高さ338px)8枚を作成し、imgフォルダ(ここでは wp-images/img14)に入れておく。画像ファイルのネーミングは、1枚目:11-18.jpg、2枚目:21-28.jpg のようにする。

サンプル(DEMO)




































本サンプル表示用HTML

<!-- 表示領域 -->
<div id="stage">
 <!-- スライド1  各スライスの配置 -->
  <div id="slide1" class="slide">
    <img src="wp-images/img14/11.jpg" class="slice slice1">
    <img src="wp-images/img14/12.jpg" class="slice slice2">
    <img src="wp-images/img14/13.jpg" class="slice slice3">
    <img src="wp-images/img14/14.jpg" class="slice slice4">
    <img src="wp-images/img14/15.jpg" class="slice slice5">
    <img src="wp-images/img14/16.jpg" class="slice slice6">
    <img src="wp-images/img14/17.jpg" class="slice slice7">
    <img src="wp-images/img14/18.jpg" class="slice slice8">
  </div>
  <div id="slide2" class="slide">
    <img src="wp-images/img14/21.jpg" class="slice slice1">
    <img src="wp-images/img14/22.jpg" class="slice slice2">
    <img src="wp-images/img14/23.jpg" class="slice slice3">
    <img src="wp-images/img14/24.jpg" class="slice slice4">
    <img src="wp-images/img14/25.jpg" class="slice slice5">
    <img src="wp-images/img14/26.jpg" class="slice slice6">
    <img src="wp-images/img14/27.jpg" class="slice slice7">
    <img src="wp-images/img14/28.jpg" class="slice slice8">
  </div>
  <div id="slide3" class="slide">
    <img src="wp-images/img14/31.jpg" class="slice slice1">
    <img src="wp-images/img14/32.jpg" class="slice slice2">
    <img src="wp-images/img14/33.jpg" class="slice slice3">
    <img src="wp-images/img14/34.jpg" class="slice slice4">
    <img src="wp-images/img14/35.jpg" class="slice slice5">
    <img src="wp-images/img14/36.jpg" class="slice slice6">
    <img src="wp-images/img14/37.jpg" class="slice slice7">
    <img src="wp-images/img14/38.jpg" class="slice slice8">
  </div>
  <div id="slide4" class="slide">
    <img src="wp-images/img14/41.jpg" class="slice slice1">
    <img src="wp-images/img14/42.jpg" class="slice slice2">
    <img src="wp-images/img14/43.jpg" class="slice slice3">
    <img src="wp-images/img14/44.jpg" class="slice slice4">
    <img src="wp-images/img14/45.jpg" class="slice slice5">
    <img src="wp-images/img14/46.jpg" class="slice slice6">
    <img src="wp-images/img14/47.jpg" class="slice slice7">
    <img src="wp-images/img14/48.jpg" class="slice slice8">
  </div>
  <div id="slide5" class="slide">
    <img src="wp-images/img14/51.jpg" class="slice slice1">
    <img src="wp-images/img14/52.jpg" class="slice slice2">
    <img src="wp-images/img14/53.jpg" class="slice slice3">
    <img src="wp-images/img14/54.jpg" class="slice slice4">
    <img src="wp-images/img14/55.jpg" class="slice slice5">
    <img src="wp-images/img14/56.jpg" class="slice slice6">
    <img src="wp-images/img14/57.jpg" class="slice slice7">
    <img src="wp-images/img14/58.jpg" class="slice slice8">
  </div>
</div>

本サンプル表示用CSS

/* 表示領域の設定 */
#stage
 { position:relative;
   max-width:600px;
   overflow:hidden;
 }
/* 表示領域の確保 */
.slide {
   width:100%;
   padding-top:12%;
 }
/* 各スライスの初期配置 */
.slice { position:absolute; top:0; left:100%; width:12.5%; }
/* 各スライスのanimationのセット */
#slide1 .slice1 { animation:appr1 30s ease 0s infinite; }
#slide1 .slice2 { animation:appr2 30s ease 0s infinite; }
#slide1 .slice3 { animation:appr3 30s ease 0s infinite; }
#slide1 .slice4 { animation:appr4 30s ease 0s infinite; }
#slide1 .slice5 { animation:appr5 30s ease 0s infinite; }
#slide1 .slice6 { animation:appr6 30s ease 0s infinite; }
#slide1 .slice7 { animation:appr7 30s ease 0s infinite; }
#slide1 .slice8 { animation:appr8 30s ease 0s infinite; }
#slide2 .slice1 { animation:appr1 30s ease 6s infinite; }
#slide2 .slice2 { animation:appr2 30s ease 6s infinite; }
#slide2 .slice3 { animation:appr3 30s ease 6s infinite; }
#slide2 .slice4 { animation:appr4 30s ease 6s infinite; }
#slide2 .slice5 { animation:appr5 30s ease 6s infinite; }
#slide2 .slice6 { animation:appr6 30s ease 6s infinite; }
#slide2 .slice7 { animation:appr7 30s ease 6s infinite; }
#slide2 .slice8 { animation:appr8 30s ease 6s infinite; }
#slide3 .slice1 { animation:appr1 30s ease 12s infinite; }
#slide3 .slice2 { animation:appr2 30s ease 12s infinite; }
#slide3 .slice3 { animation:appr3 30s ease 12s infinite; }
#slide3 .slice4 { animation:appr4 30s ease 12s infinite; }
#slide3 .slice5 { animation:appr5 30s ease 12s infinite; }
#slide3 .slice6 { animation:appr6 30s ease 12s infinite; }
#slide3 .slice7 { animation:appr7 30s ease 12s infinite; }
#slide3 .slice8 { animation:appr8 30s ease 12s infinite; }
#slide4 .slice1 { animation:appr1 30s ease 18s infinite; }
#slide4 .slice2 { animation:appr2 30s ease 18s infinite; }
#slide4 .slice3 { animation:appr3 30s ease 18s infinite; }
#slide4 .slice4 { animation:appr4 30s ease 18s infinite; }
#slide4 .slice5 { animation:appr5 30s ease 18s infinite; }
#slide4 .slice6 { animation:appr6 30s ease 18s infinite; }
#slide4 .slice7 { animation:appr7 30s ease 18s infinite; }
#slide4 .slice8 { animation:appr8 30s ease 18s infinite; }
#slide5 .slice1 { animation:appr1 30s ease 24s infinite; }
#slide5 .slice2 { animation:appr2 30s ease 24s infinite; }
#slide5 .slice3 { animation:appr3 30s ease 24s infinite; }
#slide5 .slice4 { animation:appr4 30s ease 24s infinite; }
#slide5 .slice5 { animation:appr5 30s ease 24s infinite; }
#slide5 .slice6 { animation:appr6 30s ease 24s infinite; }
#slide5 .slice7 { animation:appr7 30s ease 24s infinite; }
#slide5 .slice8 { animation:appr8 30s ease 24s infinite; }

/* 各スライスのanimation */
@keyframes appr1 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	3% { left:0%; transform:scale(1,1); }
	20% { left:0%; }
	100% { left:0%; z-index:0; }
}
@keyframes appr2 {
	0% {left:100%; z-index:100; transform:scale(0,0);}
	0.4% { left:100%; transform:scale(0,0);}
	3% { left:12.5%; transform:scale(1,1); }
	20% { left:12.5%;}
	100% { left:12.5%; z-index:0; }
}
@keyframes appr3 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	0.8% { left:100%; transform:scale(0,0); }
	3% { left:25%; transform:scale(1,1); }
	20% { left:25%;}
	100% { left:25%; z-index:0; }
}
@keyframes appr4 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	1.2% { left:100%; transform:scale(0,0); }
	3% { left:37.5%; transform:scale(1,1); }
	20% { left:37.5%;}
	100% { left:37.5%; z-index:0; }
}
@keyframes appr5 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	1.6% { left:100%; transform:scale(0,0); }
	3% { left:50%; transform:scale(1,1); }
	20% { left:50%;}
	100% { left:50%; z-index:0; }
}
@keyframes appr6 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	2.0% { left:100%; transform:scale(0,0); }
	3% { left:62.5%; transform:scale(1,1); }
	20% { left:62.5%;}
	100% { left:62.5%; z-index:0; }
}
@keyframes appr7 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	2.4% { left:100%; transform:scale(0,0); }
	3% { left:75%; transform:scale(1,1); }
	20% { left:75%;}
	100% { left:75%; z-index:0; }
}
@keyframes appr8 {
	0% {left:100%; z-index:100; transform:scale(0,0); }
	2.8% { left:100%; transform:scale(0,0);}
	3% { left:87.5%; transform:scale(1,1); }
	20% { left:87.5%;}
	100% { left:87.5%; z-index:0; }
}

コメントを残す

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