こんにちは！
ここ最近、画像を背景にフルスクリーンで表示するデザインをよく見かけます。確かに一度見ると印象に残りますし、見る人にインパクトを与える魅力的なデザインだと思います。
そんなデザインを実現するために、使えそうな「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」！」でした！
コメント