画像が横に１０分割される大きさの矩形が順次FadeInして画面を覆って閉じ、次いで順次FadeOutして次の画面を開けるタイプのスライドショーで、ブラインドが開閉するようなタッチを出したつもりである。
サンプル
本サンプル表示用HTML
<div id="stage"> <div id="frame"> <div id="photo1" class="photo"><img src="img2/1.jpg"></div> <div id="photo2" class="photo"><img src="img2/2.jpg"></div> <div id="photo3" class="photo"><img src="img2/3.jpg"></div> <div id="photo4" class="photo"><img src="img2/4.jpg"></div> <div id="photo5" class="photo"><img src="img2/5.jpg"></div> </div> <div id="rec1" class="rec"></div> <div id="rec2" class="rec"></div> <div id="rec3" class="rec"></div> <div id="rec4" class="rec"></div> <div id="rec5" class="rec"></div> <div id="rec6" class="rec"></div> <div id="rec7" class="rec"></div> <div id="rec8" class="rec"></div> <div id="rec9" class="rec"></div> <div id="rec10" class="rec"></div></div> |
HTML概要説明
・表示用写真を#frame内にすべて表示させる。
（cssで全て画面中央に重ねて表示させ、初期は全て非表示にする）
・短冊形矩形１０枚を、横に並べて画面を覆うようにし、opacityを0にして透明にしておく。
本サンプル表示用CSS
#stage { position: relative; width: 600px; height:338; margin: 0 auto;}.photo { position: absolute; width: 600px; height: 338px;}.photo img { visibility:hidden; -webkit-animation: imgTrans 30s infinite; animation: imgTrans 30s infinite;}#photo1 img { -webkit-animation-delay: 0s; animation-delay: 0s;}#photo2 img { -webkit-animation-delay: 6s; animation-delay: 6s;}#photo3 img { -webkit-animation-delay: 12s; animation-delay: 12s;}#photo4 img{ -webkit-animation-delay: 18s; animation-delay: 18s;}#photo5 img { -webkit-animation-delay: 24s; animation-delay: 24s;}#frame { width: 600px; height: 338px; position: relative; overflow: hidden;}.rec { width:60px;height:338px;background:#fff; position:absolute; top:0; opacity:0; -webkit-animation: sliceaction 6s infinite; animation: sliceaction 6s infinite;}#rec1 { left:0; -webkit-animation-delay: -0.4s; animation-delay: -0.4s;}#rec2 { left:60px; -webkit-animation-delay: -0.3s; animation-delay: -0.3s;}#rec3 { left:120px; -webkit-animation-delay: -0.2s; animation-delay: -0.2s;}#rec4 { left:180px; -webkit-animation-delay: -0.1s; animation-delay: -0.1s;}#rec5 { left:240px; -webkit-animation-delay: 0s; animation-delay: 0s;}#rec6 { left:300px; -webkit-animation-delay: 0.1s; animation-delay: 0.1s;}#rec7 { left:360px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}#rec8 { left:420px; -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}#rec9 { left:480px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s;}#rec10 { left:540px; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}@-webkit-keyframes imgTrans { 0% { visibility:visible;} 20% { visibility:hidden;} 100% { visibility:hidden;}}@-webkit-keyframes sliceaction { 0% { opacity:1;} 5% { opacity:1;} 20% { opacity:0;} 80% { opacity:0;} 95% { opacity:1;} 100% { opacity:1;}}@keyframes imgTrans { 0% { visibility:visible;} 20% { visibility:hidden;} 100% { visibility:hidden;}}@keyframes sliceaction { 0% { opacity:1;} 5% { opacity:1;} 20% { opacity:0;} 80% { opacity:0;} 95% { opacity:1;} 100% { opacity:1;}} |
CSSのポイント説明
・#stage から #frame までのCSSは、フェイドイン・アウト型と同じであるが、animation(imgtrans) は、FadeIN OUT を使わずに、visibility で表示、非表示を切り替えるようにしている。
・短冊矩形は、スライド切替のタイミングに合わせて、0.1秒差で順次非透明化させてスライドを覆い、次いで、同じく0.1秒差で順次透明化させ、次のスライドが現れるようにしている。
（短冊矩形の animation 間隔は、スライド切替間隔の6秒に合わせる）
・最初の矩形のanimationのスタートを、-0.4sにしているのは、スライド切替のタイミングと矩形の開閉のタイミングを調整するため。
乙ちゃんより
お世話になります、サイト管理者様。ブラインド開閉型を画像２０枚で、色々いじってみたのですが、前の画像が隠れるまえ(50%)に次の画像が出現します。１枚３秒で、６０秒設定しています。修正(注意)箇所があれば、ご教示よろしくお願いいたします。
なんかアバターがおかしく表示されますね。（原因不明です）
現象が今一つつかめませんが、
@keyframes で、5％刻みで切り替わるように設定していますか(この例では20%))。
Css下のkeyframesの４箇所、20％部分は5％に修正しています。その前後の数値は、適当に入れています。スタートの－0.4秒設定をいろいろいじってみていますが、その影響でしょうか？
短冊の sliceaction の方はいじらずに、スライド切換えが3秒でしたら、animation: sliceaction 3s infinite; に代えます。