ホームページにアクセスするたびにランダムで背景色や背景画像を変更したい、というときに使ったjQueryのコードをご紹介します。
まずはCSSに次のようにクラス名をいくつか用意します。例として今回はそれぞれに異なる背景色を適用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .wrapper { background: #DDD; padding: 20px; } .background1 { background: #FDD; } .background2 { background: #CDD; } .background3 { background: #DFD; } .background4 { background: #DCD; } .background5 { background: #FFF; } |
backgroundのあとに1~5までの連番をもったクラス名が存在するのがわかりますね。
あとはJavaScritpでランダムにどのクラスを使うかを選ぶ、という実装をします。
1 2 3 4 | $(function () { var num = Math.ceil(5 * Math.random()); $('div.wrapper').addClass('background' + num); }); |
上記のコードでやっていることは難しくありません。
1〜5までの整数をランダムに作り、その整数をもったクラス名を.wrapperに付与するということを行っています。
Math.random()は0 以上 1 未満の範囲内でランダムな浮動小数点を返してくれるのでその値に掛ける5を行います。
その値の小数点以下はMath.ceil()で切り上げを行えば1〜5のランダムな整数を作ることができます。
その整数をもったクラス名を指定の要素に追加するようすれば、ページにアクセスするごとに異なるCSSを適用させることができます。
CodePenでサンプルを作ってみました。動作させるごとに違った背景色が適用させるはずなので何度かRERUNボタンを押して試してみてください。
See the Pen QqGVGw by Daisuke Koshimizu (@dkossy) on CodePen.
CSSを変更すれば、色を変えるだけではなく背景画像をクラスごとに出し分けることもできます。
ランダムに選ばれるクラス名を増やしたり減らしたり、このコードはいくらでも応用が効くので色々試してみてください。
以上、Webサイトにアクセスするたびランダムで違った背景色・背景画像にしたいときの方法を紹介しました。
それではまた！
楽天、Yahooショッピング、カラーミー、各種ネットショップ構築に対応いたします。
