よもやまチョモランマ

CSSとJSで背景画像をランダムに表示したい

WEB CSSJavascript

いろいろ試して、本当に色々いっぱい試して、やっとできたのがこの方法でした。

【参考】jQueryで画像をランダムに切り替える方法

この2つ目の方法「CSSクラス切り替え」をmy鉄板としたいと思います。

まず、JavaScript。
WordPressでは、もうほぼほぼfunctionで呼び出してるので、ファイルにしておきます。
「よく使うJS」フォルダにも入れとけ。

$(function(){
    var maxNum = 10, // 最大枚数
    rdm = Math.floor(Math.random()*(maxNum))+1;
    $('#full_bg').addClass('setView' + rdm);
});

最大枚数の数字を画像ファイルの数に合わせなきゃいけないのが、ややネックですかね。

つぎに、CSSで画像を列挙します。
今回は「真ん中を基準にフルスクリーンで」「白文字をのせるから画像を暗くして」の延長で「ヒーロー画像ひとつにしぼれないからランダム表示して」だったのでこんな感じになってますが。
基本は、IDには幅と高さとかその程度で良いようです。

#full_bg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	min-height: 100vh; /*スマホなどではみ出てしまう場合の対策*/
	background-position: center;
	background-size: cover;
}
.setView1 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_01.jpg);}
.setView2 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_02.jpg);}
.setView3 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_03.jpg);}
.setView4 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_04.jpg);}
.setView5 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_05.jpg);}
.setView6 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_06.jpg);}
.setView7 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_07.jpg);}
.setView8 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_08.jpg);}
.setView9 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_09.jpg);}
.setView10 {background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)), url(images/topimg_10.jpg);}

しかし、この複雑怪異なソースを残すのには理由があります。
今回ならではの教訓があったのです。

画像を暗くするためのグラデーションは、あくまで画像と一緒でなければなりません。
＃のほうに記述したくなりますが、分けてしまうと画面がグラデーションになるだけで画像が出ないのです。

あと、画像が10個以上になっても「setView01」にしてはいけません。
桁を揃えたくなりますが、ゼロが入るとの画像のとき画面は真っ白になってしまうのです。

そんな、ちょっとしたコツは必要ですが、やっとできた～

試作段階で、画像の選定に迷って「とりあえず全部やって見せてよ」なんてクライアントには、良いかもしれないです。

≪ next post
prev post ≫