スライドを縦方向に分割した（ここでは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; }
}