ブラウザの背景全体に画像を表示する（ランダム配置とアニメーション）【jQuery連載03】

今回はブラウザ全体に写真を配置したサンプルです。CSSなどでも背景に写真を配置することができますが、様々なウインドウサイズによって表示領域を制御するためにjQueryを使用して作成してみました。

一枚画像の表示だけでは簡単なので、背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しています。

写真をメインにしたり、グラフィカルなサイトを作成する場合に便利なサンプルになっていると思います。

今回作成したサンプル

背景に写真を配置したサンプルを見る

背景画像をランダムにし一定時間でアニメーションさせるサンプルを見る

ビジュアル画像をHTMLに読み込ませる

今回は背景に表示させる画像はCSSでの背景画像指定ではなく、表示させる領域を制御するためにdiv#background内にimg要素にて配置した画像を画面全体に表示させます。

画像が拡大縮小されるからといってwidthとheightの属性は記述しないと拡大縮小率がおかしくなるので用意した画像サイズを指定します。

用意する画像サイズに決まりはないですが、あまり小さいと大きなモニタで画質が悪くないので注意しよう。今回はワイドモニタを想定して幅1280px、高さ853pxの画像を使用しました。

表示に使用した画像はこちらです。（本記事ではリサイズしています）

<div id="background"><img src="img/img.jpg" alt="" width="1280" height="853"></div>

ブラウザサイズによっての背景画像の表示に配慮しよう

写真を全面に配置する場合の注意する点としては、ブラウザのサイズによって見える範囲が極端に違うとイメージが伝わりにくくなるので、異なるブラウザサイズでもビジュアルイメージを崩さないように画像を中央を基準にリサイズさせ、ウィンドウサイズが指定したコンテンツのサイズを下回った場合には、画像のリサイズを中止しスクロールバーを表示させるなどの配慮をしました。

今回使用する空と海の写真では、中央を基準に表示されるので地面や空や左右は切れても綺麗な海のイメージは伝えることができるかとおもいます。

また、極端に縦長や横長にしたブラウウザなどでは小さいサイズ、また全体的に小さくなったブラウザでは縦横にスクロールバーを表示させるので画像が小さくて見えなくなるということを防ぎます。

ブラウザウインドウサイズは使用する人によって広げ方が違うので中央基準で上下左右はトリミングしてもイメージが崩れないグラフィックを用意するとよいでしょう。

サンプルファイルのブラウザウインドウサイズを変更して表示範囲を試してみてください。

背景に写真を配置したサンプルを見る

このようにすることで極端に画像が小さくなってしまったり、縦横比のおかしなブラウザの際にもイメージを崩さないようになります。

ウインドウ全体に中央に画像を表示させるコード

Javascriptでブラウザのウインドウサイズと表示させる画像のサイズを取得し、その値を元にして拡大率と画像を中央に配置させる為にx座標とy座標を求めます。

これらの値を画像に適用させることによって縦と横の拡大率の大きい方にあわせて画像がリサイズされます。画像を囲むdiv要素の#backgroundには、ブラウザの表示領域と同じ縦幅と横幅が設定され、画像はその要素内の中央位置に配置され、領域をはみ出た場合はその分だけ非表示にする設定のため、リサイズの結果、画像のサイズの方が領域のサイズよりも大きい場合は、はみ出た分だけ画像の上下左右がトリミングされた状態で表示されます。

領域および画像のリサイズを停止させる最小サイズはoptionsの値で設定することができ、リサイズが行われないことで、ブラウザ表示領域よりも画像がはみ出た場合は、その分だけブラウザのスクロールが可能となります。

また、ウインドウサイズと同じ高さと横幅を設定しているため、拡大率の小さいほうは、上下左右がトリミングされた形で表示されます。画像縮小をやめてスクロールバーを表示させるブラウザサイズはoptionsで設定できます。

script.js

(function(){

  var options = {
    minWidth: 800,
    minHeight: 600,
  };

  //　要素のキャッシュ
  var
    $window = $(window),
    $contents = $('#contentContainer'),
    $background = $('#background'),
    $img = $background.find('img');

  //　背景画像が画面中央に配置されるように調整
  function adjustImage(_obj) {
    var
    ww = $window.width(),
    wh = $window.height(),
    iw = _obj.width(),
    ih = _obj.height(),
    scale = Math.max( ww / iw, wh / ih ),
    sw = Math.floor( iw * scale ),
    sh = Math.floor( ih * scale ),
    moveX = Math.floor( (ww - sw) / 2 ),
    moveY = Math.floor( (wh - sh) / 2 );
    
    _obj.css({
      width: sw,
      height: sh,
      left: moveX,
      top: moveY
      });
  }

  //　ブラウザウィンドウサイズに合わせて画像をリサイズ
  function resize() {
    var
    ww = $window.width(),
    wh = $window.height(),
    _opw = options.minWidth,
    _oph = options.minHeight,
    _res = {
     w: _opw > ww ? _opw : ww,
     h: _oph > wh ? _oph : wh
    };

    $background.css({
     width: _res.w,
     height: _res.h
    });

    $contents.css({
     width: _res.w,
     height: _res.h
    });
  
    $background.find('img').each(function(){
      adjustImage($(this));
    });
  }

  $window.on('resize', resize);
  $window.on('load', function(){
   setTimeout( function(){
    $contents.css('background','none').fadeIn();
   }, 400);
   resize();
  });

}());

背景に表示させる画像は一番下に配置させるためにCSSにて#backgroundを一番下のレイヤーに配置し、positionで位置をブザウザの左上基準にさせます。

style.css

#background{
  z-index: -9999;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
#background img{
  position: absolute;
  top: 0;
  left: 0;
}

背景画像をランダムで表示させ、一定時間ごとに画像を切り替える

次にバリエーションとして、ページにアクセスするたびに複数の画像をランダムに表示させ、一定時間ごとに画像を切り替えてみます。

背景画像をランダムにし一定時間でアニメーションさせるサンプルを見る

1枚の画像を配置するサンプル（index.html）では、img要素を直接HTMLに記述していたが、ランダムで配置するサンプル（index_random.html）では、Javascript上で複数画像をプリロードしてからimg要素を生成し、ランダムに選ばれた画像を最初に表示させ、表示後は一定時間ごとに画像がフェードインしながら切り替わるようにしました。

画像はJavascript（script_random.js）の冒頭に記述されている変数option内に、画像ファイル名を記述することで任意に画像を差し替えることが可能だす。

script_random.js

(function(){

  var options = {
    minWidth: 800,
    minHeight: 600,
    images: {
     dir: 'img/',
     path: [
     '01.jpg',
     '02.jpg',
     '03.jpg'
     ],
     current: 0,
     duration: 8000
    }
  };
  
  //　変数の初期化と要素のキャッシュ
  var
    $window = $(window),
    $contents = $('#contentContainer'),
    $background = $('<div id="background">').prependTo($contents),
    imgs = [];
  
  //　初期設定
  function init() {
    //　画像のプリロード
    var _imgspath = options.images.path,
    _imgsdir = options.images.dir,
    _rnd = Math.floor(Math.random()*_imgspath.length);
    
    for(var i = 0; len = _imgspath.length, i < len; i++){
     imgs.push(jQuery("<img>").attr("src", _imgsdir + _imgspath[i]));
    }
    imgs.current = _rnd;
     
    setTimeout( function(){
      changeBgImage(_rnd);
      $contents.css('background','none').fadeIn();
      }, 1200);

    resize();
  };
  
  //　背景画像の切り替え処理
  function changeBgImage(_cur) {
    var _images = options.images,  _$img;
       
    _cur = _cur > _images.path.length-1 ? 0 : _cur;
    _$img = imgs[_cur].appendTo($background).hide();
    _images.current = ++_cur;
    
    setTimeout( function(){ adjustImage(_$img) }, 100);
    setTimeout( function(){ changeBgImage(_cur) }, options.images.duration || 2000);
  }
  
  //　背景画像が画面中央に配置されるように調整
  function adjustImage(_obj) {
   var 
   ww = $window.width(),
   wh = $window.height(),
   iw = _obj.width(),
   ih = _obj.height(),
   scale = Math.max( ww / iw, wh / ih ),
   sw = Math.floor( iw * scale ),
   sh = Math.floor( ih * scale ),
   moveX = Math.floor( (ww - sw) / 2 ),
   moveY = Math.floor( (wh - sh) / 2 );

   _obj.css({
      width: sw,
      height: sh,
      left : moveX,
      top : moveY
   });
   _obj.fadeIn(1000);
  }

  //　ブラウザウィンドウサイズに合わせて画像をリサイズ
  function resize() {
    var
    ww = $window.width(),
    wh = $window.height(),
    _opw = options.minWidth,
    _oph = options.minHeight,
    _res = {
      w: _opw > ww ? _opw : ww,
      h: _oph > wh ? _oph : wh
    };
    $background.css({
      width: _res.w,
      height: _res.h
    });
    $contents.css({
     width: _res.w,
     height: _res.h
    });
  
    $background.find('img').each(function(){
      adjustImage($(this));
    });
  }

  $window.on('resize', resize);
  $window.on('load', function(){   
   init();
  });

}());

今回紹介したサンプルの詳細は『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

自分はここで18個のサンプルを担当しており、この連載でどんどん紹介していこうと思っています。

作成したサンプルや本の紹介はこちらをご覧ください。

すぐに使えるサンプルがたくさん！『現場でかならず使われている jQueryデザインのメソッド』発売いたしました。

今回は以上になります。

次回はベーシックですが、ページトップへ戻るのスムーズスクロールとページ戻るボタンの出現方法をCSS3のアニメーションやjQueryを使用するなど複数パターンを紹介します。