【コーディング】超分かりやすい!CSSスライダーアニメーション!!
昨日はコーディングの授業がありました。
数値の設定が意味不明だった@keyframesアニメーションの設定について、とても分かりやすく教えていただき、まるでヘッダー画像のように暗雲から光差し込むような感覚を覚えました!!さすが先生!!!すごい。
忘れないうちに、noteにまとめておきたいと思います。
どんなコードを書いたか
HTML/CSSは以下の通り設定しました。
やりたいこととしては、1枚につき6秒ずつ合計5枚の画像を表示したい。6秒×5枚なので全ての画像が表示される合計の秒数は30秒間。それを永遠にリピートしたい。
※画像はCSSのbackground:url();ではなくHTMLのimgタグで入れています。親要素にposition:relative; 子要素の.backにposition:absolute;をかけていますがアニメーションに関係ないので省略しました。
コピペで記述したので、うまくいっていますが、何をどういじればどう変化が起きるのかイメージできず、アレンジできない(;_;)という状態でした。
【HTML】
<div class="back1 back"><img src="image/back2.jpg" alt=""></div>
<div class="back2 back"><img src="image/back2.jpg" alt=""></div>
<div class="back3 back"><img src="image/back3.jpg" alt=""></div>
<div class="back4 back"><img src="image/back4.jpg" alt=""></div>
<div class="back5 back"><img src="image/back5.jpg" alt=""></div>
divでimgをくくって、divにclass名としてback1〜5とbackをそれぞれ指定しています。
【CSS】
.back img {
opacity: 0;
animation: rotation 30s infinite;
}
.back1 img {
animation-delay: 0;
}
.back2 img {
animation-delay: 6s;
}
.back3 img {
animation-delay: 12s;
}
.back4 img {
animation-delay: 18s;
}
.back5 img {
animation-delay: 24s;
}
@keyframes rotation {
0% {
opacity: 0;
}
7% {
opacity: 1;
}
18% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
こんな感じです。私にはこのCSSで指定している%数値やopacityがなぜ中2つだけ1なのか、意味がわかりませんでした。。
よくわかる解説☆
平成教育委員会的な。笑
令和になっちゃったから時代錯誤感、、笑
まず、上から順番に解説したいと思います。
.back img {
opacity: 0;
animation: rotation 30s infinite;
}
①backのimgに対して
opacity: 0; 0%表示(0%不透明=100%透明=非表示)
animation: rotation 30s infinite;
(アニメーションの名前をrotationに指定して(@keyframesで使う)
アニメーションの全体の秒数を30秒(30s)に指定
infiniteで永遠にリピ設定)
.back1 img {
animation-delay: 0;
}
.back2 img {
animation-delay: 6s;
}
.back3 img {
animation-delay: 12s;
}
.back4 img {
animation-delay: 18s;
}
.back5 img {
animation-delay: 24s;
}
②back1〜5に対してanimation-delayをそれぞれかけてあげる。
back1はすぐに開始。back2は6秒後に開始。back3は12秒後に開始・・・
@keyframes rotation {
0% {
opacity: 0;
}
7% {
opacity: 1;
}
18% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
③0%・25%・100%では非表示に、7%・18%では表示されるように、opacityの数値を設定。
これ!!!!!!!!!!!!!
意味不明の数値ですよね。。
でも、解説していただいて理解できました!!!嬉
まず、考え方としては、
30秒間を100%として計算します。
※15秒経過した時点=50%ですね。33%あたりが10秒時点かな。
フェードイン&アウトさせるために6秒より少しゆとりをもった秒数設計をしてあげます。(この辺を何%で設定するかによって1枚目から2枚目に移り変わるふわっと感(?)が変わります)
上記の設定ではどんな設定にしているかというと
0%(開始時)のとき
opacity: 0;
7%(開始から2.1秒後(30秒×0.07))のとき
opacity: 1; →ふわっと表示させる
18%(開始から5.4秒後(30秒×0.18))のとき
opacity: 1; →表示させっぱなし
25%(開始から7.5秒後(30秒×0.25))のとき
opacity: 0; →だんだんフェードアウトさせる
100%(開始から30秒後)のとき
opacity: 0; →25%〜100%までは完全透明(非表示)
という感じです!!
図にして説明してみると
こんな感じです!!!
Webページを表示したと同時にback1がスタート!7%(2.1秒)までにopacity:1;(100%不透明=見えている状態)になるようふわっと表示され、そのまま5.4秒までopacity:1;で表示され続け、その後フェードアウト。
そうしているうちにページを表示してから6秒後にback2がスタート!時間差でback2〜5がback1と同じ動きをします。
なぜ、時間差で同じ動きをするかというと、
①で、.back img (つまりback1〜5)に対してanimation: rotation 30s infinite;という同じ設定をしているから!
つまり、back1〜5の画像が6秒毎に順番にフェードインアウトを繰り返す設定のできあがり!!!!!
意味、分かりましたか?
あんまり綺麗な図と説明ではないかもしれませんが;
私の中ではめちゃくちゃスッキリ☆
上記の設定では、次の画像へうつるタイミングで一瞬画面が真っ白になり、5枚の画像がフェードインアウトする設定です。
(アニメーションを言葉で説明するの難しい;実装してみてくださいm(_ _)m)
もう少し画像のフェードインの時間を早めに、フェードアウトの時間を遅めに、たとえば7%→5%、18%→20%くらいにしてあげると、表示される時間(opacity:1;の時間)が長くなるので、真っ白の画面はほぼなしで画像が切り替わっていきます。
数値の理論を知っていると、画像の枚数が増えても、表示させる秒数が変動しても対応できますね♪
ただし、スライダーは基本的にJavaScriptで表示させるのが簡単?で一般的?らしいですヾ(✿❛◡❛)ノ
スクールには説明上手な先生がいて嬉しいです♡
はっとこ。笑
こんなにしっかりと解説作ったのは初めて・・・!
分かりやすかったよと思ったら、よろしければnoteにスキ♡や、Twitterにいいね♡押してくださいませm(_ _)m♡
この記事が気に入ったらサポートをしてみませんか?