Web制作のアレコレ

CSSでスライドショー

CSSで作るスライドショー

@keyframesとanimationを組み合わせるとcssだけでもスライドショーを作ることができます。

メリット

すごく動作が軽くなるのでモバイルにやさしい作りになります。

デメリット

とことん古いブラウザは対応していません。
記述がややこしい上に記述量が多い

とにかく作ってみます
流れはjQueryを使うときと似ていますのでそちらがわかっていれば下準備は楽かもしれません

下準備

まずはHTMLと基本的なCSSの準備から
今回の例ではdiv要素の中にimg要素を入れる形でマークアップをしていきます。
div要素はいろいろなところで登場するのでclass属性をつけておくと後々作業しやすいかもしれません。
ここではclass属性に「slide」を付けてみました

HTML


<div class="slide">
  <img src="img/img4.jpg" alt="">
  <img src="img/img5.jpg" alt="">
  <img src="img/img6.jpg" alt="">
</div>

このまま表示するとただただ画像が3枚表示されるだけなので、CSSでさらなる準備をしておきましょう

簡単に表現するならば「全ての画像を真ん中に表示できるようにしつつ重ね合わせる」作業をしていきます。
重ね合わせるにはimgの親要素である、「.slide」に対して「position:relative」を
imgに対して「position:absolute」を指定します

これだけで重なりますがレスポンシブ対応を考えるともう一工夫してあげたいです
「.slide」に対して幅と高さを設定します。今回は適当にしました

さらにimg要素には画像の真ん中を表示できるように位置の設定もしてあげましょう

この時便利なものがtop・leftともに50%を指定しつつ、translateで-50%づつずらす方法で、
こうすることによりimgの中心点が「.slide」の中心に来るようになります。

「overflow:hidden」を使ってはみ出た部分は隠す設定もすると良いでしょう
細かいところも含めたCSSのコードはこちらになります

CSS


.slide {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

ここまでで下準備はおしまい
あとは@keyframesとanimationの設定になります

@keyframesのキモ

@keyframesを設定するときに難しい部分として%の設定をどう切り分けたらいいのか、
これに尽きると思います
今回はクロスフェード式で作っていきますスライドの点数に応じて変えていきましょう

クロスフェードとは?

フェードアウトとフェードインを同時に行って、画像が重なりながら切り替わる効果を
クロスフェード
と表現します

スライドが3点の場合

今回の例のようにスライドさせる画像が3点であれば33%を境に画像が切り替わるようにしていきます。
ただし、33%ぴったりで切り替えようとすると動きがぎこちなくなりますので
33%よりも前から消し始めて
33%よりも後に完全に消えるようにします。
更に0%から表示させているとやっぱりぎこちない動きになってしますので表示タイミングも少しずらしておきましょう

CSS


@keyframes slideshow {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

アニメーションの三分の一を使って表示・非表示を切り替えて、あとは非表示のままに指定します。
違和感がすごいですがこのままでいきます。
5%~28%までは確実に表示状態
そこから38%になるまでに非表示になります

これはあくまでもスライドの点数が3点の時の指定方法になりますので画像が増えた場合は不具合が起きるので注意が必要です。

設定の際の目安

スライド点数 切り替えタイミング 切り替えの範囲
2枚 50% 45%~55%
3枚 33% 28%~38%
4枚 25% 20%~30%
5枚 20% 15%~25%

あくまでも目安

アニメーション時間の設定

基本的に計算して当てはめてあげると良いでしょう
計算式は
スライドの点数×表示しておきたい時間=アニメーションの時間
になります
今回上で紹介した3点のスライドショーを表示時間8秒で設定する場合
8秒×3枚=24
アニメーション全体の時間は24秒になります
後は、animationプロパティの設定をするだけです

CSS


.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}

opacity: 0の設定も追加してあげています。
あとは個別にanimation-delayプロパティでタイミングをずらしてあげればok
最終的なコードは↓

CSS


.slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }

}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}

.slide img:nth-child(2){
  animation-delay: 8s;
}

.slide img:last-child{
  animation-delay: 16s;
}

あとはこのコードをアレンジしてください
そのままのコードで実装すると下のサンプルのような形になります

sample


横方向にスライドする形は長くなりそうなので気が向いたら記事にします