cssで画像をクロスフェード&レスポンシブデザイン

4/5の勉強会でcssで画像をクロスフェードやりました。先生の記事を読んでも理解力が無く上手く出来なかったので、実際に説明してもらいました。

家で実際にやってみました。トップページです。http://nobu-69.com/manakaa/sample2/

①画像をレスポンシブデザインにする。

今まで画像の親要素に高さを指定しないと、画像の領域が確保できないので、高さを指定してましたが、それだと、画面の横幅をせばめた時に画像の下に余白でできてカッコ悪かった。それのカッコ悪さを少なくするために、メディアクエリで細かく段階に分けて高さの指定をしていましたが、以下の方法でその必要は無くなりました。

対処として1枚目の画像はposition:absoluteしない!です。それにより、1枚目は常に表示されている状態になるので高さがキープされます。その上で1~4枚目をクロスフェードします。
高さの指定は、どこにもしてはいけません。

②cssでクロスフェード
animation:overwrap 12s ease infinite; アニメーションの名前(任意)overrap 全体の長さ12秒  easeイージングです。  infinite永遠に繰り返し

.slider h1 img:nth-of-type(2) {animation-delay:3s;} 2枚目の画像はキーフレームがスタートして3秒後にアニメ―ションが始まる。何が始まるかは、以下の指定です。最初は見えない、全体の5%になった所で見える。100%になるまで見え続ける。
@keyframes overwrap {
0% {opacity:0;}
5%,100%{opacity:1;}
}

ポイント1:opacity:0は、何にも見えない。opacity:1は丸見え。opacityとは日本語で不透明。opacityは、0から1で指定。その間は、0.1,0.2,0.3,0.4,…….。
ポイント2:ベンダープレフィックスを書くときに、何にも無しのやつは、1番下が良い。

animation-delayプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションがいつ始まるかを指定する際に使用します。
———————————————–
先生。
①画像をレスポンシブデザインにする。は上手く出来ました。
②cssでクロスフェードですが、上手くループしません。4枚目の画像表示まではGoodですが、それ以降が変な感じです。

何故でしょうか?

cssで画像をクロスフェード&レスポンシブデザイン」への2件のフィードバック

  1. タカハシ先生タカハシ先生

    nth-of-type(1)はanimationしていないのでdelayをする必要はない。
    で、うまくループしないのはkeyframesの中身がうまくできていないから。
    absoluteを解除してあげると、アニメがどういう状態になっているかわかります。細かいタイミングの調整もしやすい。
    うまくいくkeyframesの設定はわかるけれど、正解発表は一旦、保留にしておきますね。

    返信
    1. 真中のぶ

      >nth-of-type(1)はanimationしていないのでdelayをする必要はない。
      そうですよね。急いでやったので、イージーミスです。すいません!

      >で、うまくループしないのはkeyframesの中身がうまくできていないから。
      absoluteを解除してあげると、アニメがどういう状態になっているかわかります。細かいタイミングの調整もしやすい。
      うまくいくkeyframesの設定はわかるけれど、正解発表は一旦、保留にしておきますね。
      保留ありがとうございます。すぐに答えが分ると身になりませんからね。頑張ってみます!そしてアドバイスありがとうございます。

      返信

コメントを残す

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

CAPTCHA