BACKSTRETCH | Nutspress

久し振りにHTML関連です。
所属のクラブから依頼があってサイト構築の予定なんですが、なかなか全体着手できずで、取り急ぎのイベントページだけ作って仮アップしました。

掲載する内容もイベントの本サイトの方に行けば詳しく書かれているのでエリアの紹介を兼ねて簡単に1ページのみの構成（あまりに簡素すぎ・・・笑）白無垢ではちょっと寂しいかなと思って背景画像をフルスクリーン表示にしてボリュームあるようにしてみました。

今回使用したスクリプトはBACKSTRETCHで、軽量かつ設置が簡単、ページ全体の背景だけでなく指定した要素にも対応、スライドショーでの表示も可能となっています。

【設置方法】

1.BACKSTRETCHで.jsファイルをダウンロード

2.HTMLを作成して.jsファイルを呼び込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>

1 2	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.backstretch.min.js"></script>

3.呼び出す画像をJSで指定する

$(function(){
	$("body").backstretch("images/sky.jpg");
});

$(function(){

$("body").backstretch("images/sky.jpg");

});

以上、スリーステップで設置完了です。非常に簡単（笑）
要素自体に指定する場合や、スライドショーを利用する場合はJSの記述を変更していくだけです。

さて、、、これから本サイトの構築作業やっていくんですけど3月中になんとか形にしたいところ。