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

公開日:2014年7月1日
最終更新日: 2015年2月28日

js_full_photo_01

こんにちは!

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

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

目次!

1.「Fullscreen Background for jQuery」とは?
2.設置手順!
3.デモページ!

「Fullscreen Background for jQuery」とは?

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

設置手順!

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

必要jsのダウンロード!

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

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

js_full_photo_02

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」!」でした!

それではまた。

公開日:2014/07/01
最終更新日: 2015年2月28日
カテゴリー:jquery・js

関連記事

新着記事

コメント/トラックバック (1件)

トラックバック用URL:

この投稿のコメント・トラックバックRSS

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




管理人にのみ公開されます

正しい数値を入力して下さい * Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly