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