Webでも裁ち落としでインパクトを出せる

DTPでは、1ページ内に写真を裁ち落としでページいっぱいに載せ、その上に文字を置くのは定番のデザイン。でも、Webでそれを表現するのはなかなか難しいものです。ユーザーによってディスプレイの解像度や利用するブラウザが違うためです。

現在、多くの解像度やブラウザに対応できるように、widthを固定し、コンテンツをセンター配置にすることが多くなっています。その分、うまくフルスクリーンで表現できれば、することができれば、より一層かっこよさやインパクトを与えることができます。

今回ご紹介するのは、JavaScriptを使い、フルスクリーンで背景画像を表示する方法です。第6回「裁ち落としてインパクトのあるデザインを作るでも同じようなUIをご紹介しましたが、IE6で縦スクロールが出てしまうという欠点があります。オプションの充実度からも、今回のやり方のほうが使いやすいかもしれません。

動作確認ブラウザは以下の通りです。

Windows

• IE 6
• IE 7
• Firefox 3.6
• Chrome 8
• Safari 5

Mac

• Firefox 3.6
• Safari 5
• Chrome 8

Supersized.jsでオプションを指定する

それでは実装方法を見ていきましょう。

まずはHTMLのhead部分です。

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/supersized.3.0.core.js"></script>
    <script type="text/javascript">  
        $(function(){
            $.fn.supersized.options = {  
                startwidth: 2000,  
                startheight: 1600,
                vertical_center: 1,
                slides : [
                    {image : 'img/001.jpg' }
                ]
            };
            $('#supersized').supersized(); 
        });
    </script>

まず、以下の2つのライブラリを読み込みます。

• jquery.min.js
• supersized.3.0.core.js
  http://buildinternet.com/project/supersized/

ポイントはsupersized.3.0.core.jsです。supersizedは、画像の比率を保ったままリサイズしてくれます。以下の3つのオプションを指定してください。

startwidth, startheight

画像はここで設定した比率を元にリサイズされます。画像が歪まないように、正確な比率を記述してください。画像サイズをそのまま記述しても問題ありません。

なお、ここではそれぞれ(2000,1600)となっていますが、（⁠5,4）としても同じ効果が得られます。

vertical_center

以下のように、設定する値によって配置が変わります。

slides

画像のファイルパスを指定します。

画像の表記領域やテキストを指定する

続いてHTMLのbodyの部分を見ていきましょう。

<div id="loading"> </div>
<div id="content-wrapper">
  <div id="content">
    <h1>Full Screen<br />
      <span>with Supersized</span></h1>
  </div>
</div>
<div id="supersized"></div>

ポイントは以下の3つです。

• #loadingにCSSでローダーの画像を指定する
• #content-wrapperの中にテキストなどのコンテンツを記述する
• #supersizedの部分がフルスクリーンの背景画像が表示される領域となる

なお、HTMLファイルの最上部に記述しているコメントアウトの部分を消すと、IE6、7では表示が崩れます。そのため、消さないほうがいいでしょう。

フルスクリーン表示される画像の詳細を指定する

最後はCSSです。

#supersized {
    position:fixed;
}
#supersized img {
    -ms-interpolation-mode: bicubic;
}
#supersized img {
    height:100%;
    width:100%;
    position:absolute;
    z-index: -1;
}

まず、#supersizedでposition:fixed;を指定し、位置を固定します。

なお「-ms-interpolation-mode: bicubic;」はIE7から利用可能になった独自プロパティです。利用すると画像がリサイズされたときにバイキュービック法を利用して拡大・縮小されるため、二アレストネイバー法よりも綺麗に表示できます。ただし、W3Cではエラーになるため、書かない方が無難です。

スライドショーも実装できる

ちなみに、supersized.jsには以下の特徴があります。

• 画像の縦横比を維持しながらブラウザに合うように画像をリサイズする
• フェードイン＆フェードアウトしながら画像を切り替える
• ナビゲーションで「一時停止・再生・戻る・進む」をコントロールする

これを利用すれば、複数の背景画像をアニメーションしながら切り替えることで、スライドショーを実装することもできます。オプションも豊富です。詳細は以下のサイトにてご覧ください。

Supersized - Full Screen Background/Slideshow jQuery Plugin

http://buildinternet.com/project/supersized/

フルスクリーン表示（全画面表示）にするには、静的なサイトならば今回ご紹介したようにJavaScriptを使ったり、Flashならばswffit.jsやswfforcesize.jsを使ってスクロールバーの表示に対応させるなどちょっとした工夫が必要です。しかし、独自の世界観を演出するのにもってこいの手法なので、今後ますます利用シーンは増えていくでしょうし、実装方法も簡易化されていくと思われます。フルスクリーンのサイトを見たら、ぜひどう作られているかを考えてみてください。