CSSだけで複数の画像を自動で切り替えて表示する方法

公開日:2014/10/03

よくトップページの上部中央あたりで自動で写真切り替えて表示してるページを見かける。
あれをつくってみようと思った。
CSSだけで。Java Scriptなしで。
Java Scriptが嫌いなわけじゃないけどCSSで実現できることはCSSでやりたい。

HTMLで画像を配置

まずはHTML。

<div class="album">
	<img class="img1" src="/img/smart_slogan.png" alt="Make your system smart.">
	<img class="img2" src="/img/smart.png" alt="Smart Limited Liability Company">
</div>

簡単すぎる。
切り替えたい画像の数だけimgタグで指定してdivタグで囲う。
それぞれ任意のクラス名をつける。idでもいいけど。
That's it(σ・∀・)σ

CSSで画像を重ねる

CSSで画像を同じ位置に重ねる。

.album {
	margin: auto;
	background-color: white;
	position: relative;
}

.album img {
	width: 50%;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	position: absolute;
	top: 0;
	left: 25%;
}

divタグにposition:relativeと2つ目以降のimgタグにposition:absoluteを指定することで重ねて配置する。
※全部のimgタグにposition:absoluteを指定するとdivタグの高さがなくなるので注意。
position指定した画像はmarginによる中央寄せが効かないのでleftで調節。width:50%の中央寄せならleft:25%で対応。

CSSにキーフレームを作成

次にキーフレームなるものを用意する。
記述するのはCSSファイル内。

@keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}

キーフレームの名前はalbumにしてみた。
今回は画像が2つなのでアニメーション1周を100%とすると各画像を表示する時間は50%ずつ。画像が4つなら25%。
この時間内でopacityを使って表示・非表示を切り替える。
いきなり表示じゃなくて徐々に浮き出て徐々に消える感じにしたいので12.5%と37.5%も指定してみた。
非表示で開始して徐々に浮き出る→12.5%時点から37.5%時点は完全に見えてる状態が続く→徐々に消えて50%時点でまた非表示。

順番にキーフレームを呼び出す

最後に各imgからalbumキーフレームを呼び出せば完成。

.album img {
	animation-name: album;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	opacity: 0;
}

.album .img2 {
	animation-delay:5s;
}

まず全部のimgタグの共通設定。
animation-nameはキーフレームでつけた名前。
animation-duration:10sでアニメーション1周を10秒間とする。
animation-iteration-count:infiniteで無限に繰り返す。
待機してる間に表示されるのを防ぐためにopacity:0も。
あとは2つ目以降の画像にanimation-delayを指定してアニメーション開始をずらしてく。
今回は1周10秒間に2つの画像を表示するから2つ目を5秒遅れてスタートさせる。
3つ目4つ目があれば同じ間隔でずらしてく。

CSSまとめ

いろんなブラウザに対応する場合、対応したいベンダープレフィックスも用意する。
animation-name、animation-duration、animation-iteration-count、animation-delayは頭につけるだけ。
-webkit-animation-name、-webkit-animation-durationみたいな。
@keyframesだけ@の後ろなのに注意。
-webkit-@keyframesは間違い。@-webkit-keyframesになる。

CSSをまとめるとこうなる。

.album {
	margin: auto;
	background-color: white;
	position: relative;
}

.album img {
	width: 50%;
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}

.album .img1 {
	display: block;
	margin: 0 auto;
}

.album .img2 {
	animation-delay:5s;
	-webkit-animation-delay:5s;
	position: absolute;
	top: 0;
	left: 25%;
}

@keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

@-webkit-keyframes album {
	0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

まあ簡単( ﾟдﾟ)

完成

こうなる。

CSSなかなかやる。
Java Script撲滅キャンペーン(｀・ω・´)ｼｬｷｰﾝ