• RSS

[JS]背景全体に画像を固定させ、ランダム表示もできるjQuery プラグイン「jQuery Backstretch」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQuery プラグイン jQuery Backstretch

1 枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎にランダムで切替表示することもできる便利なプラグインです。

jQuery Backstretch のダウンロード

以下のページより jQuery Backstretch のファイルをダウンロードします。


jQuery Backstretch の設置

jquery ファイルと一緒に jquery.backstretch.min.js を設置します。
<script src="./jquery.min.js"></script>
<script src="./jquery.backstretch.min.js"></script>
<script>
$.backstretch('./画像ファイルのパス');
</script>

背景画像のパスを $.backstretch(''); 内に設定すれば、以下のデモページのように画像をブラウザ幅に合わせてフルスクリーン表示させることができます。
jQuery Backstretch による単体画像の背景設置デモ


背景画像をランダムで出力する

ちょっとカスタマイズするだけで、複数枚の画像をアクセス毎にランダム表示させることもできます。
<script src="./jquery.min.js"></script>
<script src="./jquery.backstretch.min.js"></script>
<script>
$(document).ready(function(){
bgimgsum=5; randomnum = Math.round(
Math.random()*(bgimgsum-1))+1; bgimgurl=(
$.backstretch('./画像のフォルダ/images0'+randomnum+'.jpg'));
$('body').css('background-image',('url("'+bgimgurl+'")'));
});
</script>
画像全部で5 枚(bgimgsum=5)あるとして、それらをランダム表示する処理を入れています。

先の単体画像の時と同様、$.backstretch('') に画像ファイルのパスを入れるのですが、ランダム表示させる画像はどこか1箇所のフォルダに集めておくのがベストです。
また randomnum には数字が入ってくるので、画像名「images01.jpg」「images02.jpg」…のように連番にしておくと良いと思います。

あとは画像をランダム表示させる要素(上記例では body)に対して background-image のプロパティを追加します。

↓こんな感じで、アクセス毎に背景画像がランダムで切り替わります。
背景画像をランダムで出力するデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す