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