CSSで背景画像を画面いっぱいに表示し自動で切り替える方法

CSS3のアニメーションを使って、画面いっぱいに表示した背景画像を自動で切り替える方法の紹介です! cssのanimationプロパティを使う事で、背景画像がゆっくりフェードインされ、うっすら消えるように切り替わります。

またそれぞれの背景画像をゆっくりズームさせながらフェードインアウトさせているので、綺麗で印象に残るような背景にする事が可能です。

背景画像を自動で切り替える方法

文章で説明しても分かりづらいと思うので、まずは下記のサンプルをご覧ください。 切り替え時間を長めに設定してあるので、5秒くらい見てみて下さい。

サンプルを見る

上記ページのサンプルは全てCSSのみで再現しています。 コピペするだけでブログやホームページに実装できるのでぜひお試しを!

<ul class="sample">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
.sample {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: -1;
}
.sample li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: anime 40s linear 0s infinite ;
    animation: anime 40s linear 0s infinite ;
}
.sample li:nth-child(1) { 
    background-image: url(sample.jpg)   /* 背景画像を入力して下さい */
}
.sample li:nth-child(2) {
    background-image: url(sample2.jpg);
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
.sample li:nth-child(3) {
    background-image: url(sample3.jpg);
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}
.sample li:nth-child(4) {
    background-image: url(sample4.jpg);
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}
@-webkit-keyframes anime { 
	0% {
	    -webkit-animation-timing-function: ease-in;
		opacity: 0;
	}
	10% {
	    -webkit-transform: scale(1.1);
		opacity: 1;
	}
	40% {
	    -webkit-transform: scale(1.2);
            -webkit-animation-timing-function: ease-out;
		opacity: 1;
	}
	50% {
	    -webkit-transform: scale(1.3);
		opacity: 0;
	}
	100% { opacity: 0 }
}
@keyframes anime { 
	0% {
	    animation-timing-function: ease-in;
		opacity: 0;
	}
	10% {
	    transform: scale(1.1);
		opacity: 1;
	}
	40% {
	    transform: scale(1.2);
            animation-timing-function: ease-out;
		opacity: 1;
	}
	50% {
	    transform: scale(1.3);
		opacity: 0;
	}
	100% { opacity: 0 }
}

上記コードの各sample.jpgの部分には、表示したい背景画像のurl(絶対パス・相対パス)を記述して下さい。 それだけで背景画像が画面いっぱいに表示され、自動で切り替わるようになります。

細かい設定方法

この方法では、li要素を使って4枚の画像を背景として画面全体に表示しているため、liにopacityプロパティを設定し最初は見えないようにしています。 またアニメーションのスピードを変えたい場合は、animation: anime 40s linear 0s infinite ;40sの数値を変えて下さい。 スライド(切り替え)の繰り返しはinfiniteを設定しているため、無限となります。

それぞれのli要素の設定でanimation-delayを指定していますが、この部分の数値を変えると、背景画像を遅らせて表示する時間を変更できます。 また@keyframesで、ease-outease-inというのがありますが、その部分で背景画像をゆっくり表示・非表示にしています。

画像の拡大の割合を変更したい場合transform: scale(1.1)などの、数値の部分を変更して下さい。

まとめ

こんな感じでコピペするだけで、背景を画面いっぱいに表示し自動で切り替える事ができます。 背景が透けるように切り替わると、結構綺麗だと思うので、よければお試しを!

使う写真によっては、すごい印象的な背景になるような気がします。