CSS だけでスライドショー

jQuery、JavaScript を使ってスライドショーを作るのが昔は一般的でしたが今なら CSS だけでも十分スライドショーに見える仕組みを作ることが出来ます。

この記事ではシンプルにフェイドイン・フェイドアウトで画像が切り替わるスライドショー作ってみます。下の方にデモも作りましたので参考にしてみてください。

slideshow

作り方

制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。

HTML

<div class="photo-show">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
    <img src="画像のURL">
</div>

必要最低限の記述です。img タグに width、height、alt 属性を付けたい場合はそれぞれに付け足してください。

CSS

.photo-show { 
    height: 440px; /*表示したい大きさ*/
    margin: 30px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
    width: 440px; /*表示したい大きさ、height と合わせる*/
}

.photo-show img { 
    animation: show 16s infinite;
    -webkit-animation: show 16s infinite;
    border-radius: 50%;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.photo-show img:nth-of-type(7) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
} 
.photo-show img:nth-of-type(8) {
    animation-delay: 14s;
    -webkit-animation-delay: 14s;
}

/*マウスが画像に重なった際、動きを止めて四角くする*/

.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    border-radius: 0;
}

一応、古めの Safari を考慮して -webkit- ベンダープレフィクスを付けていますが、最新版ではいらないのでなくても構いません。

マウスカーソルが重なった際に動きが止まるように、animation-play-state というプロパティを使っています。

デモ

滝つぼ トマト スカイツリー マダラ雲 滝 浅草寺 海岸 バラ

フェイドイン・フェイドアウトで切り替わる様子がわかります。マウスカーソルを重ねることでアニメーションが止まる四角い画像になるようにしています。ではなぜ上記の CSS でスライドショーになるかというのを下で説明してみます。

何故スライドショーになるのか

滝つぼ トマト スカイツリー マダラ雲 滝 浅草寺 海岸 バラ

あえて画像を重ねずに表示すると上のようになります。アニメーションの出たり消えたりするリズム自体は全ての画像同じですが、アニメーションのスタートする時間が異なるのがわかるかと思います。nth-of-type 疑似セレクタを使う事で各画像のアニメーション開始時間をずらしています。時間をずらしているものを重ねることでスライドショーのように見せています。

まとめ

全て同じアニメーションでもスタート時間をずらすだけでスライドショーのような挙動が可能です。フェイドイン・フェイドアウトだけではなく横移動でのスライドショーも頑張れば CSS だけで作ることが出来ます。これも同様にスタート時間をずらしていくだけです。

画像の枚数を変えたりすると全てのタイミングが狂うため、調整が面倒くさいのが CSS の残念な部分ではあるのですが仕方がないですね。もし枚数を変えたい、アニメーションの感覚を変えたいなどの場合は時間関係の記述がすべて変更になるので調整してください。

アニメーションに z-index 値の変更などを入れれば画像に a タグをつけてをアンカーにしたりも出来るかと思います。仕組みは簡単なので色々応用が効きそうです。