こんにちは！
今日はコーディングネタをひとつ。
これは生徒さんがスライドショーを作っていて、jQueryで行なっていたのですが、
「やっぱりスライドショーは需要が高いなぁ」
と思いブログを書くことにしました。
今日は、
jQuery苦手！！
CSSでもスライドショー作れる？？
な声にお答えしていきます^^
まずはスライドショーを確認してみよう
↑↑にスライドショーがあります。
このスライドショーは、3枚の画像が交代ごうたいに表示されています。
画像が切り替わる時に、徐々に画像が変化していくようになってますね。
デモサイトも作りましたので、ご覧ください。
このデモサイトを用いて、説明していきますね！
コードの確認
まずスライドショーの、html、cssコードを確認していきましょう。
HTML
<ul>
<li><img src="slideshow3.jpg" alt="スライドショー画像３"/></li>
<li><img src="slideshow2.jpg" alt="スライドショー画像２"/></li>
<li><img src="slideshow1.jpg" alt="スライドショー画像１"/></li>
</ul>CSS
ul{
height:450px;
position:relative;
list-style:none;
}
@media (max-width:800px){
ul{
height:calc(100vw / 800 * 450);
}
}
ul li{
position:absolute;
top:0;
left:0;
}
ul li img{
width:100%;
}
@keyframes op {
0% {opacity: 100;}
30% {opacity:100;}
36% {opacity:0;}
94% {opacity:0;}
100% {opacity:100;}
}
ul li:last-child img{
animation:op 6s infinite;
}
ul li:nth-child(2) img{
animation:op 6s 2s infinite;
}
ul li:first-child img{
animation:op 6s 4s infinite;
}htmlを確認していただくとわかるように、リストとして3枚の画像を表示させています。
cssで、この3枚の画像を同じ位置に固定し、透明度を変化させるアニメーションを行なっています。
「slideshow3.jpg」「slideshow2.jpg」「slideshow1.jpg」
３から１の順番で記述されているのは、画像を同じ位置に固定しているためです。
一番最初に目に見える画像（ここではslideshow1.jpg）を、あえて最後に記述しています。
スライドショーを再現するcssアニメーション
まず、スライドショーが具体的にどのように作られているか、みていきましょう。
3枚の画像があり、一つ一つの画像が表示されたり、表示されなかったり、を繰り返すアニメーションを作っていきます。
イメージしやすいように、動画で見ていきましょう。
画像が表示されたり、非表示になったり、を繰り返します。
このアニメーション（キーフレーム）の記述が以下になります。
@keyframes op {
0% {opacity: 100;}
30% {opacity:100;}
36% {opacity:0;}
94% {opacity:0;}
100% {opacity:100;}
}アニメーションの30%から36%にかけて、透明になっていき、
94%から100%にかけて、不透明になります。
これを3枚の画像に適用します。
一番下の画像には以下のようなアニメーションを適用をします。
ul li:last-child img{
animation:op 6s infinite;
}先ほどのアニメーションを、6秒間で行い、無限（infinite）に繰り返す指定ですね。
真ん中の画像は、以下です。
ul li:nth-child(2) img{
animation:op 6s 2s infinite;
}「2s」の記述が増えましたね。
アニメーションの開始が2秒遅れる、という記述です。
６秒間のアニメーションの中で、
1枚２秒間ずつ表示させて、さらに真ん中の画像はタイミングを2秒遅らせる、
ということです。
一番上の画像は、こちら。
ul li:first-child img{
animation:op 6s 4s infinite;
}こちらは最後の画像なので、4秒遅れでアニメーションをスタートさせます。
3枚の画像は、同じアニメーションを適用していますが、タイミングが2秒、4秒と遅れることで、それぞれ交代に表示されていくんです。
スライドショーの画像を同じ位置に固定
あとは、3枚の画像を同じ位置に固定すればOK！
ul{
height:450px;
position:relative;
list-style:none;
}
ul li{
position:absolute;
top:0;
left:0;
}
ulを相対位置（position:relative;）に指定し、
li（それぞれの画像）を絶対位置（position:absolute;）に指定しています。
これで、3枚の画像が重なり、アニメーションも2秒ずつタイミングがずれ表示されます。
これで、スライドショーの完成です。
最後に
いかがでしたか？
意外に簡単にできたのではないでしょうか？
アニメーションの一つ一つの指定を細かく説明はできてないのですが、まずはコピペでやってみてください。
コードを眺めているとだんだん意味がわかったくるかなぁ、と思います。
また、さりげなくレスポンシブ対応もしていますよ！
@media (max-width:800px){
ul{
height:calc(100vw / 800 * 450);
}
}この部分ですね！
画面が縮まると、高さも合わせて縮まるようになっています。
アニメーションの細かい説明や、レスポンシブ対応についてもブログにしていきたいなぁ、と思っています。
今回のアニメーションは、透明から不透明へと繰り返していくものでした。
余白や、位置指定を加えていけば、左右方向や、縦方向へ移動して画像が切り替わるようなスライドショーも作れます！
スライドショーの画像が増えるようであれば、秒数や、タイミングを調整していくと良いです^^
是非、今回の記事を参考に、いろいろなスライドショーを作ってみてくださいね！
