画像を背景にフルスクリーンで表示させる「Fullscreen Background for jQuery」!

こんにちは!

ここ最近、画像を背景にフルスクリーンで表示するデザインをよく見かけます。確かに一度見ると印象に残りますし、見る人にインパクトを与える魅力的なデザインだと思います。

そんなデザインを実現するために、使えそうな「jQuery」の「Fullscreen Background for jQuery」を今回はご紹介したいと思います。

「Fullscreen Background for jQuery」とは?

背景にフルスクリーンの状態で画像を敷き詰めて表示させることができます。通常は全てCSSなどで対応しますが、この「jQueryを使用すれば簡単に実現できます。

設置手順!

それでは実際に設置してみたいと思います。

必要jsのダウンロード!

↓必要となるjsを以下のURLより、ダウンロードしてください。

↓「Download ZIP」をクリックしてください。こちらからデモファイルをダウンロードできます。

jsの設置!

↓htmlのhead部分に画像を背景にフルスクリーンで表示させるために必要なjsを記述してください。「#background-image」の部分はhtmlのid名に合わせてください。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fullscreenBackground.js"></script>
<script>
$(function(){
$("#background-image").fullscreenBackground();
});
</script>

CSSの設置!

↓レイアウト調整に必要なCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/style.css" />

上記のjsとCSSを記述したhtml!

↓jsとCSSを記述したhtmlは以下のようになります。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">

<title>Fullscreen Backgroundのサンプル!</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullscreenBackground.js"></script>

<script type="text/javascript">
$(document).ready(function () {
  $("#background-image").fullscreenBackground();
});
</script>

</head>

<body>
  <div id="content">
    <h1>タイトルが入ります。</h1>
    <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
  </div>

  <div id="background-image">
    <img src="img/cityscape.jpg" width="2000" height="1333" />
  </div>

</body>
</html>

以上で設定完了です。デモページとサンプルファイルを用意しましたので、ご確認ください。

デモページ!

↓上記の設定をしたデモページを作成しました。

↓デモページのサンプルファイルはこちらよりダウンロードできます。

最後に!

デザイナーの端くれとして一度、画像フルスクリーンのデザインをしてみたいですね。業種が限られてくるような気がしますし、良い写真は必須ですが。その時には今回の「jQuery」を使用したいと思います。

以上「画像を背景にフルスクリーンで表示させる「Fullscreen Background for jQuery」!」でした!

コメント