4/5の勉強会でcssで画像をクロスフェードやりました。先生の記事を読んでも理解力が無く上手く出来なかったので、実際に説明してもらいました。
家で実際にやってみました。トップページです。http://nobu-69.com/manakaa/sample2/
|
1 2 3 4 5 6 7 8 |
<div class="slider"> <h1> <img src="img/index/900315logo.gif" alt="manaka design"> <img src="img/index/900315flower.jpg" alt="manaka design"> <img src="img/index/900315rain.jpg" alt="no rain, no rainbow"> <img src="img/index/900315only.gif" alt="たかがデザイン"> </h1> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.slider{ position:relative; overflow:hidden; background-color:#000; } .slider h1 img { z-index:1; width:100%; } .slider h1 img:nth-of-type(n+2){ z-index:10; opacity:0; position:absolute; top:0; left:0; -webkit-animation:overwrap 12s ease infinite; -moz-animation:overwrap 12s ease infinite; animation:overwrap 12s ease infinite; } .slider h1 img:nth-of-type(1) { -webkit-animation-delay:0s; -moz-animation-delay:0s; animation-delay:0s; } .slider h1 img:nth-of-type(2) { -webkit-animation-delay:3s; -moz-animation-delay:3s; animation-delay:3s; } .slider h1 img:nth-of-type(3) { -webkit-animation-delay:6s; -moz-animation-delay:6s; animation-delay:6s; } .slider h1 img:nth-of-type(4) { -webkit-animation-delay:9s; -moz-animation-delay:9s; animation-delay:9s; } @-webkit-keyframes overwrap { 0% {opacity:0;} 5%,100% {opacity:1;} } @-moz-keyframes overwrap { 0% {opacity:0;} 5%,100% {opacity:1;} } @keyframes overwrap { 0% {opacity:0;} 5%,100% {opacity:1;} } |
①画像をレスポンシブデザインにする。
今まで画像の親要素に高さを指定しないと、画像の領域が確保できないので、高さを指定してましたが、それだと、画面の横幅をせばめた時に画像の下に余白でできてカッコ悪かった。それのカッコ悪さを少なくするために、メディアクエリで細かく段階に分けて高さの指定をしていましたが、以下の方法でその必要は無くなりました。
対処として１枚目の画像はposition:absoluteしない！です。それにより、１枚目は常に表示されている状態になるので高さがキープされます。その上で１～４枚目をクロスフェードします。
高さの指定は、どこにもしてはいけません。
|
1 2 |
<!--２枚目以降はアブソルートという意味、したがって１枚目はアブソルートしない！--> .slider h1 img:nth-of-type(n+2){position:absolute;｝ |
②cssでクロスフェード
animation:overwrap 12s ease infinite; アニメーションの名前（任意）overrap 全体の長さ12秒 easeイージングです。 infinite永遠に繰り返し
.slider h1 img:nth-of-type(2) {animation-delay:3s;} ２枚目の画像はキーフレームがスタートして3秒後にアニメ―ションが始まる。何が始まるかは、以下の指定です。最初は見えない、全体の５％になった所で見える。１００％になるまで見え続ける。
@keyframes overwrap {
0% {opacity:0;}
5%,100%{opacity:1;}
}
ポイント１：opacity:0は、何にも見えない。opacity:1は丸見え。opacityとは日本語で不透明。opacityは、０から１で指定。その間は、0.1,0.2,0.3,0.4,…….。
ポイント２：ベンダープレフィックスを書くときに、何にも無しのやつは、１番下が良い。
animation-delayプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションがいつ始まるかを指定する際に使用します。
———————————————–
先生。
①画像をレスポンシブデザインにする。は上手く出来ました。
②cssでクロスフェードですが、上手くループしません。４枚目の画像表示まではGoodですが、それ以降が変な感じです。
何故でしょうか？
nth-of-type(1)はanimationしていないのでdelayをする必要はない。
で、うまくループしないのはkeyframesの中身がうまくできていないから。
absoluteを解除してあげると、アニメがどういう状態になっているかわかります。細かいタイミングの調整もしやすい。
うまくいくkeyframesの設定はわかるけれど、正解発表は一旦、保留にしておきますね。
>nth-of-type(1)はanimationしていないのでdelayをする必要はない。
そうですよね。急いでやったので、イージーミスです。すいません！
>で、うまくループしないのはkeyframesの中身がうまくできていないから。
absoluteを解除してあげると、アニメがどういう状態になっているかわかります。細かいタイミングの調整もしやすい。
うまくいくkeyframesの設定はわかるけれど、正解発表は一旦、保留にしておきますね。
保留ありがとうございます。すぐに答えが分ると身になりませんからね。頑張ってみます！そしてアドバイスありがとうございます。