fbpx

CSSで作るスライドショー

  • このエントリーをはてなブックマークに追加

こんにちは!

今日はコーディングネタをひとつ。

これは生徒さんがスライドショーを作っていて、jQueryで行なっていたのですが、

「やっぱりスライドショーは需要が高いなぁ」

と思いブログを書くことにしました。

今日は、

jQuery苦手!!
CSSでもスライドショー作れる??

な声にお答えしていきます^^

まずはスライドショーを確認してみよう

このページの上部にもスライドショーがあります。

このスライドショーは、3枚の画像が交代ごうたいに表示されています。

画像が切り替わる時に、徐々に画像が変化していくようになってますね。

デモサイトも作りましたので、ご覧ください。

デモサイト

このデモサイトを用いて、説明していきますね!

コードの確認

まずスライドショーの、html、cssコードを確認していきましょう。

HTML

<ul>
<li><img src="slideshow3.jpg" alt="スライドショー画像3"/></li>
<li><img src="slideshow2.jpg" alt="スライドショー画像2"/></li>
<li><img src="slideshow1.jpg" alt="スライドショー画像1"/></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」
3から1の順番で記述されているのは、画像を同じ位置に固定しているためです。

一番最初に目に見える画像(ここでは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秒遅れる、という記述です。

6秒間のアニメーションの中で、
1枚2秒間ずつ表示させて、さらに真ん中の画像はタイミングを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);
	}
}

この部分ですね!

画面が縮まると、高さも合わせて縮まるようになっています。

アニメーションの細かい説明や、レスポンシブ対応についてもブログにしていきたいなぁ、と思っています。

今回のアニメーションは、透明から不透明へと繰り返していくものでした。
余白や、位置指定を加えていけば、左右方向や、縦方向へ移動して画像が切り替わるようなスライドショーも作れます!

スライドショーの画像が増えるようであれば、秒数や、タイミングを調整していくと良いです^^

是非、今回の記事を参考に、いろいろなスライドショーを作ってみてくださいね!

SNSでもご購読できます。

写真素材無料【写真AC】

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください